One of my 2021 resolution is to strength my knowledge of CSS. I postpone the training since almost one year. So this time no excuse, everyday, I will publish here on Dev.to what I learn from my CSS course the day before.
Click follow if you want to miss nothing.
CSS Box Model
In CSS, the term "box model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
To best understand that concept let do an example. Create a index.html document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div>This is a CSS box</div>
<div>This is a CSS box</div>
<div>This is a CSS box</div>
</body>
</html>
This is a classic html document with a link to a external css (main.css) and three simple div
In main.css insert those lines:
div {
width: 200px;
padding: 10px;
border: 2px solid gray;
margin: 0;
}
This css create a style for our div
Margin, Border, Padding
Now let's review all those 3 properties and understand how they impact the CSS box.
Padding
The padding is the space around the content. In our example the padding is the space between our div text and our div border. Let's change padding to zero and see what append.
div {
width: 200px;
padding: 0;
border: 2px solid gray;
margin: 0;
}
Padding to zero remove space between border and content.
Border
The border goes around the padding and content. The border can be visible or not and can have different style and height.
Margin
The margin is the space outside the border. In our example there is no space between our div. Let's change that.
div {
width: 200px;
padding: 10px;
border: 2px solid gray;
margin: 10px;
}
Setting margin to 10px; set a space of 10px all around each div:
Block vs inline
CSS box Model can have two display style: Block or inline-block.
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
Example of block elements: div, h1 and form
Inline
An inline element does not start on a new line and only takes up as much width as necessary.
Example of inline elements: span, a and img
Let review our previous example. Like mention the div by default have a block display style. Let's change that for inline-block style.
div {
display: inline;
width: 200px;
padding: 10px;
border: 2px solid gray;
margin: 10px;
}
Inline vs inline-block
Compared to display: inline, the major difference is that inline-block allows to set a width and height on the element. Also, with display: inline, top and bottom margins & paddings are not respected, and with display: inline-block they are.
Let's change our example to display: inline-block
div {
display: inline-block;
width: 200px;
padding: 10px;
border: 2px solid gray;
margin: 10px;
}
Compare to inline, the width, top and bottom margin and padding are respected.
Margin and Padding
Up until now we use a one value margin and padding number be it's good to know we can apply margin and padding individually.
The available property are:
margin-top | padding-top
margin-right | padding-right
margin-bottom | padding-bottom
margin-left | padding-left
div {
margin-left: 10px;
padding-top: 20px;
}
It is also possible to set margin and padding with a shorthand property:
div {
margin: 10px 0px 5px 20px;
padding: 20px 10px;
}
That's equivalent to:
div {
margin-top: 10px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 20px;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 10px
padding-left: 10px;
}
Border
The CSS border properties allow you to specify the width, the style and color of an element's border.
The border-style property specifies what kind of border to display.
Some example of border-style are:
- solid
- dotted
- dashed
- double
- none
border: width style color;
div {
display: inline-block;
width: 200px;
padding: 10px;
border: 2px dotted gray;
margin: 10px;
}
We can also use border-radius to give a round border:
div {
display: block;
width: 200px;
padding: 5px;
border: 2px solid gray;
margin: 10px;
border-radius: 16px;
}
Height and Width
The CSS height and width properties are used to set the height and width of an element
The height and width properties do not include padding, borders, or margins. It sets the height/width of the area inside the padding, border, and margin of the element.
div {
height: 100px;
width: 50%;
background-color: lightgray;
margin: 5px;
}
So in that example the element have a height of 100px and width of 50% of is containing block.
Conclusion
That's it for today. Tomorrow the journey continue, see you later! If you want to be sure to miss nothing click follow me here or on twitter!
Follow me on Twitter: Follow @justericchapman
Top comments (0)