When laying out a document, the browser’s rendering engine renders each element as a rectangular frame according to the standard CSS basic frame model. CSS determines size, position, and properties (color, background, height, etc.).

Each field consists of four parts (or areas), defined by their respective boundaries:

• Content
• Padding
• Border
• Margin

What is CSS box model

A box model is a content area, bounded by a content border, that contains the “real” content of an element, such as text, an image, or a video player. Its dimensions are content-width (or content-frame width) and content-height (or content-frame-height). It often has a background color or background image

If the box-sizing property is set to content -block (default) and if the element is a block element ( div , paragrapf ), the size of the content area can be explicitly defined by width ( width ), min-width ( min-width ), max-width ( max-width ), height ( height ), minimum-height ( min-height ), and the maximum height property ( max-height ).

The padding area, bounded by the padding border, extends the content area to include the edges of the element. Its dimensions are the width of the padding box and the height of the padding box.

The width of the padding is determined by CSS properties such as padding-top , padding-bottom , padding-left , padding-right . We can also set the padding property itself and give all four padding properties or set only one that will be reflected on all four padding sizes.

The border area, limited by the border, extends to the supported area so that it also includes the edges of the element. Its dimensions are frame width and frame height.

The thickness of the border is determined by the border-width properties or uniquely border . If the box-size property is set to border-box , the size of the border area can be explicitly defined by the width , min-width , max-width, height, min-height and max-height properties. When a background (background color or background image) is set on a field, it extends to the outer edge of the border (ie, extends below the border in z-order). This default behavior can be changed with the CSS background-clip property.

The margin area, bounded by the margin edge, extends the border area to include the empty area used to separate the element from its neighbors. Its dimensions are the width of the margin-box and the height of the margin-box .

The size of the margin area is determined by the margin-top, margin-right, margin-bottom, margin-left or just margin properties. When margin collapse occurs, the margin area is not clearly defined, as the margins are split between frames.

CSS box model layout

We gave the element, which is a div in this case, the class test and it contains the following properties:

.test { width : 300px ; height : 300px ; padding : 300px ; margin : 20px ; border : 3px solid red ;
}

As we can see in the picture above, we have given an example of a box model where the blue part represents the content of the element, the green part represents the padding, the red part that relies on the padding represents the border of the element and the orange one represents the margin or distance from the neighboring elements.

You can see the box model as a house with a yard, where the distance from the fence to the house would represent padding , the fence would represent the border , the distance between your fence and the neighbor’s would represent the margin.

This is the basis of any CSS box model and its knowledge.

Finally, note that for non-replaced inline elements, the amount of space occupied (contribution to line height) is determined by the line-height property, although borders and padding are still displayed around the content.

For more news and interesting stories from digital marketing, visit our blog page or follow our Instagram profile.