When you are writing HTML (or any other programming language), well-written code follows consistent indentation and spacing patterns.
A closure is when a function can access its scope even if the function is executed outside of it.
All HTML
elements can be visualized as boxes. The term “box model” is used when talking about design and layout.
The box model is a box that wraps around every HTML
element. It consists of: the actual content, padding, borders, and margins. This can be set by using the box-sizing property in CSS.The box-sizing property defines how the width and height of an element are calculated: should they include padding and borders, or not. The image below illustrates the box model:
The box model allows us to add a border around elements, and to define space between elements.
We can control how the total width and height of an element is calculated with the box-sizing property. It can be set to:
content-box: Default. The width and height properties (and min/max properties) includes only the content. Border and padding are not included.
border-box: The width and height properties (and min/max properties) includes content, padding and border.
initial: Sets this property to its default value.
inherit: Inherits this property from its parent element.
what do you think the width of the div
below will be?
HTML
<div>
woo a div
</div>
CSS
div {
border: 4px solid black;
padding: 10px;
width: 200px;
}
The width is going to be 228px
.
Here is the calculation:
200px
(width)
+ 20px
(left + right padding)
+ 8px
(left + right border)
+ 0px
(left + right margin)
= 228px
This is because The box-sizing property defines how the width and height of an element are calculated Since we did not declare a box-sizing, it will default to content-box. The width and height of an element’s border or padding will be added to the final rendered width and height.
The total width of an element will be calculated like this:
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
The total height of an element will be calculated like this:
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
This means that when you set width and height, you have to adjust the value you give to allow for any border or padding that may be added.
what do you think the width of the div
below will be?
HTML
<div>
woo another div
</div>
CSS
div {
border: 3px solid red;
box-sizing: border-box;
padding: 40px;
width: 200px;
}
The width is going to be 200px
.
This time, Since we declare the box-sizing to border-box, it’s width and height will include any border or padding you added, and the content box will shrink to absorb that extra width.
This usually makes it much easier to size elements.
Styling HTML
can be tricky sometimes. Understanding the CSS box model and knowing how the width and height of elements are calculated can help. The box-sizing
property controls how the width and height of an element are calculated: should they include padding and borders, or not. I think it is a good idea to set the box-sizing property to border-box on all elements so you don’t have to worry about the padding and border adding to the rendered width and height.
When you are writing HTML (or any other programming language), well-written code follows consistent indentation and spacing patterns.
A closure is when a function can access its scope even if the function is executed outside of it.