What is the CSS box model?

The CSS box model as a whole applies to block boxes and defines how the different parts of a box — margin, border, padding, and content — work together to create a box that you can see on a page. Inline boxes use just some of the behavior defined in the box model.

To add complexity, there is a standard and an alternate box model. By default, browsers use the standard box model.

Parts of a box

Making up a block box in CSS we have the:

• Content box: The area where your content is displayed; size it using properties like width and height.
• Padding box: The padding sits around the content as white space; size it using padding and related properties.
• Border box: The border box wraps the content and any padding; size it using border and related properties.
• Margin box: The margin is the outermost layer, wrapping the content, padding, and border as whitespace between this box and other elements; size it using margin and related properties.

The below diagram shows these layers:

The standard CSS box model

In the standard box model, if you set width and height property values on a box, these values define the width and height of the content box. Any padding and borders are then added to those dimensions to get the total size taken up by the box.

The alternative CSS box model

In the alternative box model, any width is the width of the visible box on the page. The content area width is that width minus the width for the padding and border (see image below). No need to add up the border and padding to get the real size of the box.

Box Model Properties and Values

Margin

This property can be used to set a margin on all four sides of an element. Margins create extra space around an element, unlike padding, which creates extra space within an element. margin is a shorthand side for:

• margin-top
• margin-right
• margin-bottom
• margin-left Note:  Margin values may be positive or negative.

<style>
p.margin {
    margin-left: 15px;
    background-color: #d74f25;
    color: white;
}
</style>
 
<p class="margin">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>

Another Example :

/* apply to all four sides */
margin: 1em;
margin: -3px;
 
/* top and bottom | left and right */
margin: 5% auto;
 
/* top | left and right | bottom */
margin: 1em auto 2em;
 
/* top | right | bottom | left */
margin: 2px 1em 0 auto;

Padding

The padding sits between the border and the content area and is used to push the content away from the border. Unlike margins, you cannot have a negative padding. Any background applied to your element will display behind the padding.

• padding-top
• padding-right
• padding-bottom
• padding-left

Padding is the distance between the content and the border. Padding values must always be positive.

<style>
p.padding2 {
    padding: 10px 30px;
    background-color: #d74f25;
    color: white;
}
</style>
 
<p class="padding2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>

border

The border is drawn between the margin and the padding of a box. If you are using the standard box model, the size of the border is added to the width and height of the content box. If you are using the alternative box model, then the bigger the border is, the smaller the content box is, as the border takes up some of that available width and height of the element box.

• border-width
• border-style
• border-color
• border-top
• border-top-width
• border-top-style
• border-top-color

Same for bottom, left, right

Requires a width, style, and color to display.

Shorthand: border: 1px solid red;

<style>
.border1 {
    border-width: 5px;
    border-style: solid;
    border-color: #c02d28;
}
</style>
 
<p class="border1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Style values: solid, dotted, dashed, double, groove, ridge, inset, outset. Also none, hidden. Without a style, the border will not display.

Block and inline boxes

In CSS we have several types of boxes that generally fit into the categories of block boxes and inline boxes. The type refers to how the box behaves in terms of page flow and in relation to other boxes on the page. Boxes have an inner display type and an outer display type.

In general, you can set various values for the display type using the display property, which can have various values.

If a box has a display value of block, then:

• The box will break onto a new line.
• The width and height properties are respected.
• Padding, margin and border will cause other elements to be pushed away from the box.
• If width is not specified, the box will extend in the inline direction to fill the space available in its container. In most cases, the box will become as wide as its container, filling up 100% of the space available.

Some HTML elements, such as <h1> and <p>, use block as their outer display type by default.

If a box has a display type of inline, then:

• The box will not break onto a new line.
• The width and height properties will not apply.
• Top and bottom padding, margins, and borders will apply but will not cause other inline boxes to move away from the box.
• Left and right padding, margins, and borders will apply and will cause other inline boxes to move away from the box.
• Some HTML elements, such as <a>, <span>, <em> and <strong> use inline as their outer display type by default.