CSS Box Model

Last Updated Jul 21, 2015, 12:00:06 PM




What is CSS Box Model

Every HTML element, no matter how big or small, can be thought of as a rectangular box made up of content, padding, borders and margins.

One of the most important concepts to understand is the CSS Box Model. The Box Model is the basis of CSS's layout and positioning, and it dictates how elements are displayed and interact with each other.

The image below illustrates the box, model. When you see the box model just imagine, the entire box as a web page.

Detailed Explanation about How CSS Box Model Works

As you see in the above CSS box model image, the box in the Box Model is made up of 4 distinct parts that calculate its size, and visually it's rather simple. As you can see in this image, the inner most area and core component is the content area, which is the area containing the element's actual content such as text or images. The padding area surrounds the content area. It separates the content from the border area above. The border area of the box is the outer most of the box. You can think of it as an outline to the box. Although borders are optional, different styles such as color and thickness can be applied to them.

Finally, the margin area exists outside of the box. It's space around an element that separates it from other elements. So just remember that with the margin property, we can create space around the elements.


Each part plays a different role on the web page. Let's see each of them

Content -

The content of the box, where text and images appear on a web page

Padding - Clears an area around the content around the web page

Border - A border that goes around the padding and content on the web page

Margin - Clears an area outside the border. The margin is transparent

The very basis of designing with CSS is understanding how the Box Model works. The Box Model applies to all HTML elements. It's essentially a box that wraps the elements. So first, we'll need to begin thinking of every HTML element as a rectangle or box.

To understand CSS box model effectively, we need to know the two ways elements are naturally displayed. Elements are either displayed as block or inline elements. Block elements:

Block elements form a separate block that takes up the full width available based on the width of its parent element with a new line before and after the element.

Examples of block elements are paragraphs, any heading tag, or list element. Inline elements:

An inline element only takes up as much width as it needs. Inline elements do not force any new lines and stay in line with the rest of the document.

Examples of inline elements are tags, images, tags, and anchor elements.


CSS Box Model Example



Try It Now

Example


Try It Now

Border Property with Box Model



Try It Now

Width, Height and Overflow Properties

width and height properties allow us to specify the size of elements, and how overflow properties let us define what happens when content overflows its containing box.

By default, a box's width and height are as wide or as tall as the content it holds.

But we can set our own dimensions using the width and height properties. Both width and height can accept length units such as pixels, ems, or percentages in their values.

Using a percentage for the width makes the size of the box relative to the size of its containing box.

Em values make the size of the box relative to the current font size.

we can override the default display settings of an element with the display property.

The most fundamental and most common types of display values are none, block, inline, and inline-block.

Width Example with Box Model

Try It Now

Height Example with Box Model

Try It Now

CSS3 Box Sizing Property

With the CSS box-sizing property we can alter the way width and height are calculated.

The value border-box forces the padding and borders into the width and height instead of expanding it.

CSS3 box-sizing makes it much easier to define flexible widths where we also need padding and borders.

So it's one less thing to worry about when laying out our pages.

Box-sizing is pretty well supported,

as all major browsers support it except IE7. Currently, Firefox is the only browser that still needs a vendor prefix.

CSS3 box-sizing Example

Try It Now

Firefox is the only browser that still needs a vendor prefix. So let's make sure to also include the moz prefix declaration.

CSS -moz-box-sizing Syntax


Try It Now

min-width Property

With the CSS min-width property we can constrain the width of a box to a minimum value.

Min-width specifies the smallest size the box can be displayed when the browser is narrow.

min-width Example

Try It Now

Max-Width Property

CSS max-width indicates the maximum width a box can be stretched when the browser window is wide.

min-width Example

Try It Now

Practice with our Interactive Live Code Editors and Take your CSS Skills to the Next Level

CSS Box Model Practice

Exercise 1 Exercise 2 Exercise 3 Exercise 4

CSS Box Sizing Practice

Exercise 1 Exercise 2

Sources and Credits

The source of the content has been referred and updated with Mozilla Foundation and W3C Organization

Last Updated Jul 21, 2015, 12:00:06 PM