# CSS box model
## div tag
The <div> tag looks very unspecific, but is actually a widely used one, as it can serve as container for all the other elements. Like:
```html
Writing an own website.
```
Task: Enclose all elements inside the body each into its own div container. (Exception: If you have headlines with corresponding paragraphs of text, enclose them together in one div.)
```
As you can see, your browser displays a line break before and after a `div` tag by default.
## CSS box model
With our elements enclosed by `div` tags we'll start to explore the so called [box model](https://www.w3schools.com/css/css_boxmodel.asp) of CSS. The display of every element is defined by the box model. It consists of the `content` of the element, a `padding`, a `border` and a `margin`. You can inspect the box model of each element with the Inspector of your browser:
Here only the size of the content (487 x 267 px) is defined, so all the other values are 0.
In your `style.css` file add the tag `div` and define its border:
```css
div {
background-color: rgb(132, 202, 140);
border: 1px solid white;
}
```
(For different border styles see [this](https://www.w3schools.com/css/css_border.asp) page. For defining rounded corners see [this](https://www.w3schools.com/css/css3_borders.asp) page.)
After inspecting the results we'll add a margin:
```css
div {
background-color: rgb(132, 202, 140);
border: 1px solid white;
margin: 10px;
}
```
The margin defines the space between the border and the neighboring elements. If only one value is set, it defines all 4 sides, otherwise you can define them individually:
```css
div {
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 15px;
/* or all together in one line */
margin: 10px 15px 20px 15px;
}
```
The last part of the box model is padding. This area is in between the content and the border.
```css
div {
background-color: rgb(132, 202, 140);
border: 1px solid white;
margin: 10px;
padding: 50px;
}
```
Next we'll define the width of the `img` tag. We have to remove the inline styling of the `img` tags in `index.html` if we want to have all images to have the same size.
```css
img {
width: 25vw;
}
```
Of course you can also define a (maximum) width of the `div` tag and set the `img` width to 100% to fill the `div` container.
Task: Play around with setting styles for the div element. Use resources from the web to find information about border, margin and padding. Of course you can also apply the box model styles to other elements like for e.g. p.
## CSS box-sizing
If we use margin, border and padding that way, all these values will be added to the size of our element.
`overall_size = width + padding + border + margin`
Sometimes this is difficult to control, for e.g. if we want to create a grid with three columns.
One solution is to use the [box-sizing](https://www.w3schools.com/css/css3_box-sizing.asp) property. Commonly it's applied to all elements with the following code at the beginning of a `.css` file:
```css
* {
box-sizing: border-box;
}
```
We can see the difference with the Inspector tool.
Box model without `box-sizing` property.
Box model with `box-sizing: border-box;` property.
In the first version the content takes the specified width of 32vw (614.4px). Padding, border and margin are added on all sides to result in a total width of 716px.
The latter with `box-sizing: border-box` applied has a full width of 32vw (614.4px). The space for the content is responsive and is = `width - margin - border - padding` on both sides = 512.5px.
## Code summary
`index.html`
```html
Writing an own website
writing an own website.
A flower needs some water
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
