This blog covers the basics of the Box Model with a CodePen example at the bottom to guide you along. Jump To CodePen
The Box Model refers to the boxes that are generated with every HTML element. The browser sees each HTML element as a rectangular box. There are 4 parts of the Box Model:
This link will give you more information on inline and block elements and will also show you all HTML elements with their level type:
HTML Inline elements take as much space as the text in the content box. They stay on the same line, next to each other until the line runs out of available space, then the next inline element begins on a new line. The
height properties do not affect inline-level elements.
HTML block elements span the entire width of their container but they keep the height of the text in the content box. They always begin on a new line and stack on top of each other, unlike inline-level elements. The
height properties will affect block-level elements but will not affect inline-level elements.
The display property can be used to change the default behavior of
block level elements with three properties:
- Changing the
blockwill allow you to use
- Changing the
inlinewill allow you to place elements side by side instead of stacked on top of each other, but will also make
heightineffective on those elements.
- Changing the
inline-blockwill give characteristics of both to the elements.
heightvalues will now affect the elements just like how it affects
blocklevel elements, but the elements will now stand next to each other side by side, like
More information on the
display property: w3schools display property
- The Content box is where the content resides. Content can be text or images.
- Padding surrounds the Content Box. It gives space inside of the element around the content box.
- Border goes between margin and padding. It surrounds the padding and content box.
- Margin is the space that surrounds the whole element.
width of the content box. More information on the width property can be found here: w3schools width property
height of the content box. More information on the height property can be found here: w3schools height property
Padding will add or remove space within the element but will do so around the content box. More information on
padding properties can be found here: w3schools padding property
Border is added between
margin. More information on
border properties can be found here: w3schools border property
Margin will add or remove space around the element. More information on
margin properties can be found here: w3schools margin property
- When percentages are used, it is defined by the size of its containing(or parent) element. If there was a
500px, and the element inside of the
widthof the inside element would be
See CSS Best Practices: https://gist.github.com/basham/2175a16ab7c60ce8e001
Using relative units can be useful for creating flexible layouts that display well in different screen sizes.
remare defined by the font size of the parent element and the root element.
eminherits font size from its parent
reminherits font size from the root element
More on CSS Units: CSS Absolute & Relative Units
Hit 'Edit on CodePen' to follow along. 👍