CSS box model

All HTML elements can be thought of as boxes. The CSS box model represents the design and layout of the site. It consists of margin, border, padding and actual content.

Properties work in the same order: top, right, bottom, and left.

Properties work clockwise, top, right, bottom, left.

The box model is shown below:

Description of different parts:

  • ​Margin– Clears the area outside the border so that the margins are transparent.
  • ​Border (Border)– Borders around the inside margin and outside the content.
  • ​Padding(inside margin)– Clears the area around the content so that the inner margins are transparent.
  • ​The Content (Content)– Box contents to display text and images.

To properly set the width and height of elements in all browsers, you need to know how the box model works.

Know the total width of the element

Every element of a web page is a box.

CSS uses the box model to determine the size of an element and how to place them. The box model allows us to place elements in the space between other elements and the borders of surrounding elements.

When using the box model, it is important to understand how the total width of an element is calculated.

When you specify the width and height properties of a CSS element, you simply set the width and height of the content area. For full-size elements, you also have to add padding, borders, and margins.

For example, the total width of a box with padding will be the sum of the width plus the padding left and padding right.

This is another box with margin, border, and padding.

The total width is the sum of the left and right margins, left and right borders, left and right padding, and the actual width of the content.

When you use CSS to set the width and height properties of an element, you can set the width and height of the content area.

When setting the background color in the box model, the content area is overwritten as well as the padding area.

The formula for calculating the total width of the final element is as follows:

Total element width = width + left fill + right fill + left border + right border + left margin + right margin

The total height of the element

The total height of an element is computed in the same way as the width.

The following example is the same as in the previous lesson about padding, border, and margin.

All in all, Total element height = height + padding-top + padding-bottom + border-top + border-bottom + Margin-top + margin-bottom

If you want to center a content div with an external div, use **margin: 0 auto ** to center the left and right margins based on the width of the internal div

Border properties

Box border

Grammar: border: border -width | border – style | border – color \

The CSS border property allows you to customize the border of an HTML element.

To add a border to an element, you need to specify the size, style, and color of the border.

The following example shows how to add a solid green border with a width of 5px to a paragraph.

HTML code:

<p> I hear raindrops in the green grass </p>Copy the code

The CSS code:

p {
   padding: 10px;    
   border: 5px solid green;
}
Copy the code

Execution Result:

Border – style property

Border-style defaults to None, which does not define a border.

The bounding style attribute supports various styles: dotted, dashed, double and solid. The following example illustrates the difference.

HTML code:

<body> <p class="none">none </p> <p class="solid"> </p> <p class="dotted"> </p "Class =" dashed > dashed me really nice < / p > < p class = "double" > double I really good-looking < / p > < p class = "groove" > groove I really good-looking < / p > < p </p> <p class="outset">outset </p class="outset">outset </p> <p Class ="hidden"> </p> </body>Copy the code

The CSS code:

p.none {border-style: none; } p.solid {border-style: solid; } p.dotted {border-style: dotted; } p.dashed {border-style: dashed; } p.double {border-style: double; } p.groove {border-style: groove; } p.ridge {border-style: ridge; } p.inset {border-style: inset; } p.outset {border-style: outset; } p.hidden {border-style: hidden; }Copy the code

Execution Result:

Border – width attributes

The border width

The border property can be set separately. The border-width property specifies the width of the border.

HTML code:

Little room < p class = "first" > < / p > < p class = "second" > < / p > dog houseCopy the code

The CSS code:

p.first {
   padding: 10px;    
   border-style: solid;
   border-width: 2px;
}
p.second {
   padding: 10px;    
   border-style: solid;
   border-width: 5px;
}
Copy the code

Execution Result:

​Border color​

You can define the border color of an element using a color name keyword, RGB, or hexadecimal value.

HTML code:

<p class="first"> <p > <p class="second"> <p > <p class="third"> </p> </p>Copy the code

The CSS code:

p.first {
   padding: 10px;
   border-style: solid;
   border-width: 2px;
   border-color: blue;
}
p.second {
   padding: 10px;    
   border-style: solid;
   border-width: 2px;
   border-color: #FF6600;
} 
p.third {
   padding: 10px;    
   border-style: solid;
   border-width: 2px;
   border-color: rgb(0, 153, 0);
} 
Copy the code

Execution Result:

CSS width and height

Set the total width and height of a

element to 100px:

This should not be confused with the total width and height of the box model

HTML code:

<div> MY width and height are both 100px.Copy the code

The CSS code:

div {
   border: 5px solid green;    
   width: 90px;
   height: 90px;
}
Copy the code

Execution Result:

Note: The total width and height of the div will be 90px + 5px (border) + 5px (border) = 100px;

A measure of width and height

The width and height of elements can also be assigned using percentages.

In the example below, the width of the element is allocated as a percentage and the height is in pixels.

HTML code:

<div> The total width of this element is <strong>100%</strong> and the total height is <strong>100px</strong>. </div>Copy the code

The CSS code:

div {
   border: 5px solid green;    
   width: 100%;
   height: 90px;
}
Copy the code

Execution Result:

Minimum and maximum dimensions

To set the minimum and maximum height or width of an element, use the following attributes:

  • Min-width – The minimum width of the element \

  • Min-height – The minimum height of the element \

  • Max-width – The maximum width of the element \

  • Max-height – The maximum height of the element \

In the example below, we set the minimum height and maximum width for the different paragraphs to 100px.

HTML code:

<p class ="first"> Set the minimum height of </strong> for this section to 100px. </p> <p class ="second"> The <strong> maximum width of this segment </strong> is set to 100 pixels. </p>Copy the code

The CSS code:

p.first {
   border: 5px solid green;    
   min-height: 100px;       
}
p.second {
   border: 5px solid green;    
   max-width: 100px;       
}
Copy the code

Execution Result: