# HTML/CSS Website Layout

## Box Model

### The structure of Box Model

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1670427864942/8O3Qn8nvR.png align="left")


### Difference between margin and padding
```xml
<style>
  div {
    ......
    margin-left: 100px;
    padding-left: 100px;
  }
  div {
    margin: 100px 0 0 100px; /* top right bottom left */
    padding: 100px 0 0 100px; /* top right bottom left */
  }
</style>
```

#### margin-left
- We can make a space to the left outside of border.

#### padding-left
- We can make a space to the left inside of border
- The elements will look bigger including the space of padding.


## Block elements and Inline elements

### Block element
```xml
<p>HelloElice</p>
<p>HelloElice</p>
<p>HelloElice</p>
```
### The feature of Block element
```css
p {
  width:200px;
  height:200px;
  margin-top:100px;
}
```
- p tag is a typical block element.
- We can begin a new line in each block element tag.
- We can set width and height value.
- We can also set margin and padding.


### Inline element
```xml
<a>HelloElice</a>
<a>HelloElice</a>
<a>HelloElice</a>
```

### The feature of Inline element
```css
a {
  width:200px;
  height:200px;
  margin-top:100px;
}
```
- a tag is a typical inline tag.
- This tag outputs the each tag in line.
- We can't set width and height value.
- We can't also set margin and padding.


## Margin Collapse

### Margin Collapse between siblings

```xml
<div class=“box1”>Hello World</div>
<div class=“box2”>Hello World</div>
```
```css
.box1 {margin-bottom:150px; }
.box2 {margin-top:100px; }
```
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1670429025805/gjsNBB5HE.png align="left")

- The browser will apply bigger value between box1's margin-bottom and box2's margin-top so the margin between 2 div will be 150px.


### Margin Collapse between parent and child

```xml
<main role=“main”>
  <article></article>
</main>
```
```css
article {
  width: 200px; 
  height: 200px;
  margin-top: 100px;
}
```
- margin-top is applied to only article tag but this will affect to parent tag main so parent also will have 100px margin on top.



## Attributes that affect to layout

### Display

```css
p {display:inline; }
a {display:block; }
a {display:inline-block; 
```

- We use display attribute when we want to change the character of block and inline elements.
- If we set inline-block to display, the element has the both characters of inline and block elements so It has a space control and also The selected tag will be arranged in line.


### Float
```xml
<div class=“left”>Hello World</div>
<div class=“right”>Hello World</div>
```
```css
.left {float:left; }
.right {float:right; }
```
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1670429626766/GtSxhHXgK.png align="left")

- We use this attribute to align the selected element to left end or right end.

```css
.left {float:left; }
.right {float:left; }
```

- If we wanted to align the elements to left not to be overlapped, we have to input float : left constantly.


### Clear
```xml
<header></header>
<aside class=“left”>HelloWorld</aside>
<main></main>
<aside class=“right”>HelloWorld</aside>
<footer></footer>
```
```css
footer {clear:both; }
```

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1670430497441/Tw9VMJpJm.png align="left")


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1670430502862/Pf9zdu2kt.png align="left")
- In upper images, the footer is required to jump up into that available space as is required by floaat.
- To fix this problem, We can clear the footer to ensure it stays beneath both floated columns.
- In conclusion, Clear makes the element cleared beneath floated elements.



### Space Removal between browser and html, body tags

```css
html,body {
  margin:0;
  padding:0;
}

/* Choose all tags */
* {
  margin:0;
  padding:0;
}
```
- html tag and body tag have their own margin and padding value so we need to initialize the values with 0.
- We can choose all tags by *.