[CSS] #1 The box model

In CSS we broadly have two types of boxes - block boxes and inline boxes. These characteristics refer to how the box behaves in terms of page flow and in relation to other boxes on the page. Boxes also have an inner display type and an outer display type. First, we will explain what we mean by block box and inline box. We will then explain what is meant by an inner and outer display type.

 

 

If a box has an outer display type of block, it will behave in the following ways:

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

 

 

If a box has an outer type of inline, then:

 

• The box will not break onto a new line.
• The width and height properties will not apply.
• Vertical padding, margins, and borders will apply BUT will not cause other inline boxes to move away from the box.
• Horizontal padding, margins, and borders will apply and will cause other inline boxes to move away from the box.
• <a>, <span>, <em>, and <strong>

 

---

 

What is the CSS Box Model ?

The CSS Box Model as a whole applies to block boxes. (Inline boxes use just some of the behavior defined in the box model). The model 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.

 

Parts of a box

Making up a block box in CSS we have the:

The Box Model

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

 

The standard CSS Box Model

• The actual space taken up by the box will be Content box + Padding box + Border box
• The margin is not counted towards the actual size of the box.
• The box's area stops at the border - it doesn't extend into the margin

 

The alternative CSS Box Model

You might think it is rather inconvenient to have to add up the border and padding to get the real size of the box.

And you can use it in CSS.

box-sizing: border-box;

Using this property in CSS, any width is the width of the visible box on the page, therefore the content area width is that width minus the width for the padding and border.

 

By default in the CSS box model, the width and height you assign to an element is applied only to the element's content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that's rendered on the screen. This means that when you set width and height, you have to adjust the value you give to allow for any border or padding that may be added.

 

border- box tells the browser to account for any border and padding in the values you specify for an element's width and height.

Note: It is often useful to set box-sizing to border-box to layout elements. This makes dealing with the sizes of elements much easier, and generally eliminates a number of pitfalls you can stumble on while laying out your content. 

cf.
content-box
This is the initial and default value as specified by the CSS standard. The width and height properties include the content but do not include the padding, border, or margin. 
The actual size of the content = just content which means the width and height.

border-box
The width and height properties include the content, padding, and border, but do not include the margin. Note that padding and border will be inside of the box.
The actual size of the content
= the actual width (=> width + padding + border) * the actual height (=> height + padding + border)

 

 

 

References:

[1] https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing