Display and Box Model | Learning to Code

display Property

In the HTML articles on this website tags are divided into block-level and inline, which reflects how the built-in browser stylesheets render them.
CSS allows us to change how the elements are rendered, overriding the browser's default styling.
This is especially relevant to the box model, which is the other focus of this article, because the properties that are involved with the box model respond best to elements rendered as block or inline-block.

Property	Usage and Effect	Values	Additional Notes
display	Determines how an element is rendered.	`block` (renders the element as block-level, filling its parent element, so subsequent content moves to a new line) `inline` (renders the element as inline, so height and width are ignored) `inline-block` (renders the element as inline, but allows width and height to be applied) `none` (renders the page as if the element was never included in the code) `list-item` (renders the element as if it were a list item) `table` (renders the element as a table, with nested elements inside rendering as rows and cells) `(renders the element as a table but inline with surrounding content)` `table-row (renders the element like a <tr>) table-cell (renders the element like a <td>) table-caption (renders the element like a <caption>)`	This property is not inherited (inner tags will not pick it up from outer tags), although instructing a parent to `display: none` will cause all children and descendants to be removed from rendering. It is more accessible to use data table markup and appropriate attributes if you are working with tabular data, compared to a bunch of divs displayed as a table.

display Example

See the Pen display by Jason Withrow (@jwithrow) on CodePen.

What is the CSS Box Model?

The CSS Box Model is a key aspect of CSS and is at the heart of how CSS formats and presents information.
First, every element contains content (such as images and/or text) that is located within a defined width and/or height content box.
Wrapping around the content box is a padding box (invisible to the user; background colors go through this padding by default, although that can be changed), then a border box, and finally a margin box that is outside the border and that is also invisible to the user.
The border box is the divide between the inside of an element and the outside of the element.
- Inside the border box are the padding box and content box
- Outside is the margin box
- Any horizontal padding is in addition to the width set for the content box; any vertical padding is in addition to the height set for the content box.
Important Considerations:
- Using the box model (specifying width, height, padding, border, and/or margin) always works best on block-level elements or elements instructed to display as block or inline-block.
- For inline elements, or elements displayed as inline, width, height, and margin are ignored, border can render oddly, and padding can even run into some issues in old browsers.
- Many block-level elements have a default margin on the top and bottom greater than 0; some (such as blockquotes and lists) even have them on the left and right sides.
- The padding and border, on the other hand, generally default to 0 for the majority of elements.
- To disable a default padding or margin it can be set to 0, which does not need a sizing unit (such as px) specified.

border-related Properties

When specifying border widths the keywords (thin, medium, thick) are not ideal because they are not precise.
Specifying a border width in pixels is generally recommended for precise control, although the borders will become quite thin at high screen resolutions.
When the em and rem sizing unit is used for border widths and for sizing other parts of the box model (in other words, not for text sizing) the resulting space is calculated differently.
- A width of 1em creates an em square, which is a square shape of equal height and width, with the height of the square equal to the height of the font for the element that has the border (so 12px font size for the element and 1em border width means a 12px wide border).
- A width of 1rem creates an rem square, which is a square shape of equal height and width, with the height of the square equal to the height of the font for the root element (generally 16px, so the border is 16px wide and 16px tall).

Property	Usage and Effect	Values	Recommendations
border-top-color	Determines the color for the top border of an element.	A pre-defined color name Hexadecimal value (e.g., `#000`) RGB value (e.g., `rgb(255,0,0)` or `rgb(0%,50%,25%)`) `transparent`	The `border-color` shorthand property is usually more efficient.
border-right-color	Determines the color for the right border of an element.	A pre-defined color name Hexadecimal value (e.g., `#000`) RGB value (e.g., `rgb(255,0,0)` or `rgb(0%,50%,25%)`) `transparent`	The `border-color` shorthand property is usually more efficient.
border-bottom-color	Determines the color for the bottom border of an element.	A pre-defined color name Hexadecimal value (e.g., `#000`) RGB value (e.g., `rgb(255,0,0)` or `rgb(0%,50%,25%)`) `transparent`	The `border-color` shorthand property is usually more efficient.
border-left-color	Determines the color for the left border of an element.	A pre-defined color name Hexadecimal value (e.g., `#000`) RGB value (e.g., `rgb(255,0,0)` or `rgb(0%,50%,25%)`) `transparent`	The `border-color` shorthand property is usually more efficient.
border-color	Shorthand for `border-top-color`, `border-right-color`, `border-bottom-color`, and `border-left-color` properties.	A pre-defined color name Hexadecimal value (e.g., `#000`) RGB value (e.g., `rgb(255,0,0)` or `rgb(0%,50%,25%)`) `transparent` Important details about the number of values provided: If you specify one value (e.g., `border-color: green;`) the border-color is the same on all sides of the element. If you specify two values (e.g., `border-color: green black;`) the first value counts for top and bottom border-colors, while the second value counts for the left and right border-colors. If you specify three values (e.g., `border-color: #fff #000 #eee;`) the first value counts for the top border-color, the second value counts for the left and right border-colors, and the third value counts for the bottom border-color. If you specify four values (e.g., `border-color: #fff #000 #eee #ccc;`) the values progress clockwise around the element. The first value is used for the top border-color, the second value is used for the right border-color, the third value is used for the bottom border-color, and the fourth value is used for the left border-color.	If possible, use the `border` shorthand (or a variant such as `border-top`) rather than this property; they are more efficient.
border-top-style	Determines the style for the top border of an element.	`dashed` `dotted` `double` `groove` `inset` `none` `outset` `solid`	The `border-style` shorthand property is usually more efficient.
border-right-style	Determines the style for the right border of an element.	`dashed` `dotted` `double` `groove` `inset` `none` `outset` `solid`	The `border-style` shorthand property is usually more efficient.
border-bottom-style	Determines the style for the bottom border of an element.	`dashed` `dotted` `double` `groove` `inset` `none` `outset` `solid`	The `border-style` shorthand property is usually more efficient.
border-left-style	Determines the style for the left border of an element.	`dashed` `dotted` `double` `groove` `inset` `none` `outset` `solid`	The `border-style` shorthand property is usually more efficient.
border-style	Shorthand for `border-top-style`, `border-right-style`, `border-bottom-style`, and `border-left-style` properties.	`dashed` `dotted` `double` `groove` `inset` `none` `outset` `solid` Important details about the number of values provided: If you specify one value (e.g., `border-style: double;`) the border-style is the same on all sides of the element. If you specify two values (e.g., `border-style: double solid;`) the first value counts for top and bottom border-styles, while the second value counts for the left and right border-styles. If you specify three values (e.g., `border-style: solid none dashed;`) the first value counts for the top border-style, the second value counts for the left and right border-styles, and the third value counts for the bottom border-style. If you specify four values (e.g., `border-style: solid none double solid;`) the values progress clockwise around the element. The first value is used for the top border-style, the second value is used for the right border-style, the third value is used for the bottom border-style, and the fourth value is used for the left border-style.	Some border styles need to have a width of a few pixels before they can render properly. For example, a 1px double border will render as a solid line because at least 3 pixels of width are necessary for proper rendering. Browsers differ in how they color the tops and bottoms of borders. Extensive cross-browser, cross-platform testing is advised. If possible, use the `border` shorthand (or a variant such as `border-top`) rather than this property; it is more efficient.
border-top-width	Determines the width for the top border of an element.	Number and unit (e.g., px, em, rem, %) `thin` `medium` `thick`	The `border-width` shorthand property is usually more efficient.
border-right-width	Determines the width for the right border of an element.	Number and unit (e.g., px, em, rem, %) `thin` `medium` `thick`	The `border-width` shorthand property is usually more efficient.
border-bottom-width	Determines the width for the bottom border of an element.	Number and unit (e.g., px, em, rem, %) `thin` `medium` `thick`	The `border-width` shorthand property is usually more efficient.
border-left-width	Determines the width for the left border of an element.	Number and unit (e.g., px, em, rem, %) `thin` `medium` `thick`	The `border-width` shorthand property is usually more efficient.
border-width	Shorthand for `border-top-width`, `border-right-width`, `border-bottom-width`, and `border-left-width` properties.	Number and unit (e.g., px, em, rem, %) `thin` `medium` `thick` Important details about the number of values provided: If you specify one value (e.g., `border-width: 3px;`) the border-width is the same on all sides of the element. If you specify two values (e.g., `border-width: 3px 6px;`) the first value counts for top and bottom border-widths, while the second value counts for the left and right border-widths. If you specify three values (e.g., `border-width: 3px 6px 5px;`) the first value counts for the top border-width, the second value counts for the left and right border-widths, and the third value counts for the bottom border-width. If you specify four values (e.g., `border-width: 3px 6px 2px 4px;`) the values progress clockwise around the element. The first value is used for the top border-width, the second value is used for the right border-width, the third value is used for the bottom border-width, and the fourth value is used for the left border-width.	The `border-width` shorthand property is usually more efficient than specifying individual border widths for various sides.
border-top	Combines the other border-related properties into one sequence that applies to the top border of an element.	The properties are: border-width border-style border-color Note that each property can only be given a single value; sequencing is up to you.	Use the `border` shorthand if all sides need to be consistent.
border-right	Combines the other border-related properties into one sequence that applies to the right border of an element.	The properties are: border-width border-style border-color Note that each property can only be given a single value; sequencing is up to you.	Use the `border` shorthand if all sides need to be consistent.
border-bottom	Combines the other border-related properties into one sequence that applies to the bottom border of an element.	The properties are: border-width border-style border-color Note that each property can only be given a single value; sequencing is up to you.	Use the `border` shorthand if all sides need to be consistent. This can be used for anchors (links) as an alternative to `text-decoration`; just be sure to specify `text-decoration: none` to avoid a doubling effect (two underlines).
border-left	Combines the other border-related properties into one sequence that applies to the left border of an element.	The properties are: border-width border-style border-color Note that each property can only be given a single value; sequencing is up to you.	Use the `border` shorthand if all sides need to be consistent.
border	Combines the other border-related properties into one sequence that applies to all border sides of an element.	The properties are: border-width border-style border-color Note that each property can only be given a single value; sequencing is up to you.	Highly recommended (it is the shorthand of shorthands when it comes to border appearance, combining the `border-top`, `border-right`, `border-bottom`, and `border-left` shorthand properties).

border Example

See the Pen Box Model: Borders by Jason Withrow (@jwithrow) on CodePen.

padding-related Properties

Unlike margins, which sometimes collapse into each other (in cases of vertical overlap), padding values from different elements always add together (referred to as concatenation).

Property	Usage and Effect	Values	Recommendations
padding-top	Determines the padding space at the top of an element.	Number and unit (e.g., px, em, rem, %)	Use the `padding` shorthand if multiple sides need to be consistent.
padding-right	Determines the padding space on the right side of an element.	Number and unit (e.g., px, em, rem, %)	Use the `padding` shorthand if multiple sides need to be consistent.
padding-bottom	Determines the padding space at the bottom of an element.	Number and unit (e.g., px, em, rem, %)	Use the `padding` shorthand if multiple sides need to be consistent.
padding-left	Determines the padding space on the left side of an element.	Number and unit (e.g., px, em, rem, %)	Use the `padding` shorthand if multiple sides need to be consistent.
padding	Shorthand for `padding-top`, `padding-right`, `padding-bottom`, and `padding-left` properties.	Number and unit (e.g., px, em, rem, %) Specifying one or more values: If you specify one value (e.g., `padding: 3px;`) the padding is the same on all sides of the element. If you specify two values (e.g., `padding: 3px 6px;`) the first value counts for top and bottom padding, while the second value counts for the left and right padding. If you specify three values (e.g., `padding: 3px 6px 5px;`) the first value counts for the top padding, the second value counts for the left and right padding, and the third value counts for the bottom padding. If you specify four values (e.g., `padding: 3px 6px 2px 4px;`) the values progress clockwise around the element. The first value is used for the top padding, the second value is used for the right padding, the third value is used for the bottom padding, and the fourth value is used for the left padding.	Highly recommended; this shorthand property is usually more efficient than specifying individual paddings for various sides.

padding Example

See the Pen Box Model: Padding by Jason Withrow (@jwithrow) on CodePen.

margin-related Properties

It is possible to supply a negative margin value to an element (e.g., margin-top: -5px;) in order to shift the element's location on the page (a -5px margin-top would shift the element up the page by 5 pixels).
Top and bottom margins of elements following each other collapse rather than combine, so that only the larger margin value is used.
Some other margin considerations occur when nesting elements that all have margins; the top and bottom margins will collapse if there is no border or padding to separate the elements.
An empty element (no content) with top and bottom margins will also have those vertical margins collapse into each other, if no padding or border is specified, so that the vertical space is equal to one of those margins. For example, an empty paragraph will collapse to a single line of space, because the top and bottom margins default to 1em, so after collapsing 1em of vertical space remains. If this is immediately adjacent (following or preceding) an element with vertical margins on the appropriate side, it will then collapse into that element's margin.
Horizontal (left / right) margins concatenate (add together).

Property	Usage and Effect	Values	Recommendations
margin-top	Determines the margin space above the element.	Number and unit (e.g., px, em, rem, %)	Keep in mind that many block-level elements have default top margins greater than `0`. Overlapping vertical margins (top and bottom margins) from separate elements collapse into each other. Use the `margin` shorthand if multiple sides need to be consistent (this cuts down on the amount of code).
margin-right	Determines the margin space to the right of an element.	Number and unit (e.g., px, em, rem, %)	Overlapping horizontal margins (right and left margins) from separate elements will concatenate (add together). Use the `margin` shorthand if multiple sides need to be consistent (this cuts down on the amount of code).
margin-bottom	Determines the margin space below the element.	Number and unit (e.g., px, em, rem, %)	Keep in mind that many block-level elements have default bottom margins greater than `0`. Overlapping vertical margins (top and bottom margins) from separate elements collapse into each other. Use the `margin` shorthand if multiple sides need to be consistent (this cuts down on the amount of code).
margin-left	Determines the margin space to the left of an element.	Number and unit (e.g., px, em, rem, %)	Overlapping horizontal margins (right and left margins) from separate elements will concatenate (add together). Use the `margin` shorthand if multiple sides need to be consistent (this cuts down on the amount of code).
margin	Shorthand for `margin-top`, `margin-right`, `margin-bottom`, and `margin-left` properties.	Number and unit (e.g., px, em, rem, %) Specifying one or more values: If you specify one value (e.g., `margin: 3px;`) the margin is the same on all sides of the element. If you specify two values (e.g., `margin: 3px 6px;`) the first value counts for top and bottom margin, while the second value counts for the left and right margin. If you specify three values (e.g., `margin: 3px 6px 5px;`) the first value counts for the top margin, the second value counts for the left and right margin, and the third value counts for the bottom margin. If you specify four values (e.g., `margin: 3px 6px 2px 4px;`) the values progress clockwise around the element. The first value is used for the top margin, the second value is used for the right margin, the third value is used for the bottom margin, and the fourth value is used for the left margin.	Highly recommended; the `margin` shorthand property is usually more efficient than specifying individual margins for various sides.

margin Example

See the Pen Box Model: Margin by Jason Withrow (@jwithrow) on CodePen.

width Property

Property	Usage and Effect	Values	Recommendations
width	Determines the horizontal space for whatever is inside the element's innermost box (the content box). The total horizontal space occupied by the element is the sum of the `width`, left/right `padding`, and left/right `border`.	Number and unit (e.g., px, em, rem, %) or `auto` (the default)	This is very useful, since by default block-level elements fill up their parent element and that is not always what you want. Refrain from setting a width on the body element, as that should fill the browser window.

width Example

See the Pen Untitled by Jason Withrow (@jwithrow) on CodePen.

height Property

Property	Usage and Effect	Values	Recommendations
height	Determines the vertical space for whatever is inside the element's innermost box (the content box). The total vertical space occupied by the element is the sum of the `height`, top/bottom `padding`, and top/bottom `border`.	Number and unit (e.g., px, em, rem, %) or `auto` (the default)	I seldom specify heights, because browsers do not enforce that as a maximum height. Specifying a height sets that as the minimum height, but sufficient amounts of content can then exceed that height (see the sections of this article related to overflow and minimum heights / widths). As a result, I usually prefer to let content set the height of an element, especially if the element contains text. Only in the case of an element with no text content (perhaps just showing a background image) would I set the `height` property.

height Example

See the Pen Box Model: Height by Jason Withrow (@jwithrow) on CodePen.

calc() for Length Units

It is possible for CSS to determine values on-the-fly using calc(), for example width: calc(100% - 2px).
Addition, subtraction, multiplication, and division are supported. It is even supported in other contexts, such as determining colors, but our focus is on the box model.
This comes in very handy when you're working with a mixture of percentages and other sizing units, because the percentage is recalculating as the window is resized and the other sizing units (e.g., px, em, rem) are not changing.

Some Box Model Applications

Disabling the default spacing assigned to body: Be sure to set both margin and padding to 0 (some browsers have a default padding for body greater than 0).
Inserting vertical space between list items: Apply to li; margins work better here than padding. Useful because list items otherwise have no extra spacing between them and the extra space improves readability.
Centering a block-level container on the page (or within a parent element that is wider): Make sure the element has a width specified and then set right and left margin values to auto, which splits the available horizontal space outside the element between the two sides (thus centering the element). The element needs to be able to accept the width, so it needs to be displayed as block or inline-block.
Turning off the default blue borders around linked images: Setting the border for the image (or, to impact all images, style img as the selector) as either none or 0 will disable the blue border.
Disabling margin space above and below headings (setting it to 0): This standardizes appearance across browsers and regardless of the surrounding markup.

Box Model Applications Example

See the Pen Box Model: Applications by Jason Withrow (@jwithrow) on CodePen.

width and the Body Tag

Do not set a width on the <body> tag.
In practice, <body> should be considered the browser window, so it is the user's decision how large to make the window, or the window size may be pre-determined by the device being used (e.g., smartphones).
There are a wide variety of browsers in existence, which are used in a wide variety of environments and devices (desktops/laptops, tablets, phones, car infotainment systems, kitchen appliances, watches, etc.).
Even if modern desktop/laptop browsers seem fine with you assigning a width to body, you're not testing across a wide enough spectrum of browsers and environments, and there will be issues you're not aware of.
Bottom line: don't assign a width to body. If you need to set a width for a layout, add a container element within body and give that element a width.

Overflow and Resizing

Overflow determines how elements that are able to accept width and height (block-level or displayed as block or inline-block) handle content exceeding those defined boundaries.

Property	Usage and Effect	Values	Recommendations
overflow	Determines how content is rendered (and how the element responds) when the content exceeds the dimensions of the element.	`visible` (the default; content renders past the height and/or width of the element) `hidden` (content beyond the height and/or width is clipped and therefore not shown) `scroll` (scrollbars might always shown on the element, even if not needed) `auto` (scrollbars are shown on the element, if needed)	This property is not inherited (inner tags will not pick it up from outer tags). When defaulting to `overflow: visible` browsers allow the content to go past the height and/or width, through the border, and move into the margin of the adjacent or following element. Text wraps within the indicated width so in most cases you will not see that width being exceeded. This is not a concern if the dimension where scrolling will occur (height or width) is not specified.
overflow-x	Determines how content is rendered when the content exceeds the width of the element.	`visible` (the default; content renders past the width of the element) `hidden` (content beyond the width is clipped and therefore not shown) `scroll` (scrollbars might always shown on the element, even if not needed) `auto` (scrollbars are shown on the element, if needed)	Primarily used to disable the horizontal scrollbar. Sometimes applied to the body element if there is a small horizontal scrollbar appearing that cannot be eliminated through other means.
overflow-y	Determines how content is rendered (and how the block-level element responds) when the content exceeds the height of the block-level element.	`visible` (the default; content renders past the height of the element) `hidden` (content beyond the height is clipped and therefore not shown) `scroll` (scrollbars might always shown on the element, even if not needed) `auto` (scrollbars are shown on the element, if needed)	Primarily used to disable the vertical scrollbar.
resize	Allows an element to be resized by the user. The element must have an overflow value set to something other than visible. Resizing can be horizontal, vertical, or both directions.	`none` (the default) `both` `horizontal` `vertical` `inherit`	Browser support varies; be sure to check if your target browsers are supportive of resize.

overflow Example

See the Pen Overflow by Jason Withrow (@jwithrow) on CodePen.

Minimum and Maximum Widths and Heights

For these to work properly the element must be block-level or displayed as a block (or inline-block).
Negative values are not allowed.

Property	Usage and Effect	Values
min-height	Determines the minimum height for the element. The element can become taller, as content requires. In situations where the `height` value is less than the `min-height`, then the `min-height` value becomes the `height` value.	Number and unit (e.g., px, em, %)
max-height	Determines the maximum height for the element. In situations where the `height` value is greater than the `max-height`, then the `max-height` value becomes the `height` value. In situations where `min-height` exceeds `max-height`, then the `max-height` becomes the `min-height` value.	Number and unit (e.g., px, em, %)
min-width	Determines the minimum width for the element. The element can become wider, as content requires. In situations where the `width` value is less than the `min-width`, then the `min-width` value becomes the `width` value.	Number and unit (e.g., px, em, %)
max-width	Determines the maximum width for the element. In situations where the `width` value is greater than the `max-width`, then the `max-width` value becomes the `width` value. In situations where `min-width` exceeds `max-width`, then the `max-width` becomes the `min-width` value.	Number and unit (e.g., px, em, %)

box-sizing and Changing the Box Model

It's safe to say that a number of web developers were unhappy with the box model described elsewhere in this article.
They didn't like that the width and height properties were applied to the innermost box (the content box) and that padding and border were outside of those dimensions and adding to them.
They much preferred to have the opposite occur, and have width and height be applied to a different box (such as the border box) so that padding and border-width would be subtracted from the width and height when rendering occurred.
In essence, they wanted to flip the box model from adding to subtracting, and that's where the box-sizing property comes into play. This property is very commonly used.

Property	Usage and Effect	Values	Recommendations
box-sizing	Specifies the box model to use (the original box model, where the height and width apply to the content box, or an alternate box model).	`content-box` (the default; `padding` and `border` add to `width` and `height`) `border-box` (`padding` and `border` are deducted from `width` and `height`)	Switching to border-box is helpful if you have a container element that is sized as a percentage and it will have fixed-size padding and/or border applied to it (such as 15px padding and 2px border), as those then subtract from the percentage dynamically as the window is resized.

box-sizing Example

See the Pen box-sizing by Jason Withrow (@jwithrow) on CodePen.