This blog covers the basics of the Box Model with a CodePen example at the bottom to guide you along. Jump To CodePen
Box Model
In Chrome Developer tools, you can find a box model you can use to debug your CSS.
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:
- Content
- Padding
- Border
- Margin
Inline & Block Level Elements
This link will give you more information on inline and block elements and will also show you all HTML elements with their level type:
Inline Elements
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 width
and height
properties do not affect inline-level elements.
Block 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 width
and height
properties will affect block-level elements but will not affect inline-level elements.
The display
Property
The display property can be used to change the default behavior of inline
/block
level elements with three properties: inline
, block
, or inline-block
.
- Changing the
display
of aninline
element toblock
will allow you to usewidth
andheight
properties. - Changing the
display
of ablock
element toinline
will allow you to place elements side by side instead of stacked on top of each other, but will also makewidth
andheight
ineffective on those elements. - Changing the
display
of eitherinline
orblock
toinline-block
will give characteristics of both to the elements.Width
andheight
values will now affect the elements just like how it affectsblock
level elements, but the elements will now stand next to each other side by side, likeinline
level elements.
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.
All four of these boxes together determine the total area of an element.
The 5 properties of the Box model are: Width, Height, Padding, Border, Margin.
Width
Adjusts the width
of the content box. More information on the width property can be found here: w3schools width property
Height
Adjusts the height
of the content box. More information on the height property can be found here: w3schools height property
Padding
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
Border is added between padding
and margin
. More information on border
properties can be found here: w3schools border property
Margin
Margin will add or remove space around the element. More information on margin
properties can be found here: w3schools margin property
For Box Properties, we will use the percentage and length data types.
- When percentages are used, it is defined by the size of its containing(or parent) element. If there was a
div
withwidth
of500px
, and the element inside of thediv
uses awidth
of50%
, thewidth
of the inside element would be250px
.
Pixels should be the only Absolute length unit you use for websites.
See CSS Best Practices: https://gist.github.com/basham/2175a16ab7c60ce8e001
Relative length units are dependent upon the length of another element.
Using relative units can be useful for creating flexible layouts that display well in different screen sizes.
-
em
andrem
are defined by the font size of the parent element and the root element. -
em
inherits font size from its parent -
rem
inherits font size from the root element
More on CSS Units: CSS Absolute & Relative Units
Here is the example that covers these properties and the box model here in CodePen.
Hit 'Edit on CodePen' to follow along. π
Top comments (0)