Skip to Main Content

When setting up a document, the browser display mechanism represents each element as a rectangular frame in accordance with the standard CSS basic frame model. CSS determines the 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 the CSS box model

A box model is a content area, bounded by the edge of the content, containing the "actual" content of the element, such as text, an image or a video player. Its dimensions are the width of the content (or the width of the content box) and the height of the content (or the height of the content box). It often has a background color or background image

If it is a property box-sizing set to content-block (default) and if the element is a block elementdiv, paragraph), the size of the content area can be explicitly defined by the width (width), minimum-widthmin-width), maximum-widthmax-width), heightheight), minimum-heightmin-height), and the maximum height property (max-height).

Territory padding-a, limited by the edge padding-a, expands the content area to include the edges of the element. Its dimensions are the width of the box for padding and box height for padding.

Width padding CSS properties such as padding-top, padding-bottom, padding-left, padding right. We can also set up just padding property and there give all four properties padding or put just one that will reflect all four sizes padding-and.

Border area (border), bounded by the edge, extends to the underlying area so as to include the edges of the element. Its dimensions are the width of the frame and the height of the frame.

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

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

The size of the margin area is determined by the properties margin-top, margin-right, margin-bottom, margin-left or only  margin. When a margin collapses, the margin area is not clearly defined, because the margins are divided between the frames.

 

Appearance of the CSS box model

The element that is in this case div we have a test class and it contains the following properties:

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

As we can see in the picture above we are an example box models where the blue part represents the content of the element, the green part represents padding, the red part that relies on padding represents border element and orange represents the margin or you distance from adjacent elements.

Box you can view the model as a house with a yard where the distance from the fence to the house would represent padding, the fence would represent border , the distance between your fence and your neighbor would be a margin.

This is the basis of every CSS box model and his knowledge.

Finally, keep in mind that for unreplaced inserted elements, the amount of space occupied (contribution to line height) is determined by the property line-height, although edges and additions are still displayed around the content.

 

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

Made by Miloš Stojanović - Senior Web Developer @Digitizer