CSS Box model

2. CSS Box Model
2.1CSS Box Model Overview
The CSS box model specifies how the element frame handles element content, padding, borders, and margins.
CSS Box Model Overview



The inner part of the element box is the actual content, and the content is directly surrounded by the padding. The inner margin renders the background of the element. The edge of the padding is a border. Outside the bounding rectangle is the margin, and the margin is transparent by default, so it does not obscure any subsequent elements.
The padding, borders, and margins are optional and the default value is zero. However, many elements will have margins and padding set by the user-agent style sheet. You can override these browser styles by setting the margin and padding of the elements to zero. This can be done separately, or all elements can be set using the Universal selector:

Java code

1. * {
2. margin: 0;
3. padding: 0;
4. }

In CSS, width and height refer to the widths and heights of the content area. Increasing the padding, borders, and margins does not affect the size of the content area, but increases the size of the element box.
Assume that there are 10-pixel margins and 5-pixel padding on each edge of a box. If you want this element box to reach 100 pixels, you need to set the width of the content to 70 pixels, see:

Java code

1. #box {
2. width:70px;
3. margin:10px;
4. padding:5px;
5. }

Tip: padding, borders, and margins can be applied to all edges of an element or to individual edges.  
tip: The margin can be negative, and in many cases a negative margin is used.  

browser compatibility  
Once the appropriate DTD is set for the page, most browsers will render the content as shown above. However, the rendering of IE 5 and 6 is not correct. According to the specification, the space occupied by the element content is set by the Width property, and the padding and border values around the content are calculated separately. Unfortunately, IE5. X and 6 use their own non-standard models in quirks mode. These browsers have a width property that is not the contents, but the sum of the content, padding, and width of the border.  
Although there are ways to solve this problem. But the best solution now is to avoid the problem. That is, instead of adding an inner margin with a specified width to an element, try adding padding or margins to the element's parent and child elements.  
term translation  
? element: element.  
? padding: padding, which is also translated into fill.  
? border: Border.  
margin: margin, which is also translated into blank or blank edges.  
in W3school, we collectively refer to padding and margin as the inner margin and margin. White space inside the border is the padding, outside the border is the margin, it is easy to remember:  

2.2CSS padding   the inner margin of the
element is between the border and the content area. The simplest property that controls the area is the Padding property.   the
CSS padding property defines an empty area between the element's border and the content of the element.  
css padding properties  
CSS padding properties define the inner margins of the element. The Padding property accepts a length or percent value, but does not allow negative values.  
For example, if you want all sides of the H1 element to have a 10-pixel padding, you only need this:  

Java code

1. h1 {padding:10px;}

You can also set the padding for each edge in the order of top, right, bottom, and left, with different units or percent values for each edge:

Java code

1. H1 {padding:10px 0.25em 2ex 20%;}

Single- sided inner margin properties
The top, right, bottom, and left margins are also set by using the following four separate properties:
? padding-top
? padding-right
? padding-bottom
? padding-left
As you might have thought, the following rule implementation is exactly the same as the shorthand rule above:

Java code

1. H1 {
2. padding-top:10px;
3. Padding-right: 0.25em;
4. Padding-bottom:2ex;
5. Padding-left: 20%;
6. }

percent value of padding
As mentioned earlier, you can set a percentage value for the inner margin of an element. The percent value is calculated relative to the width of its parent element, which is the same as the margin. Therefore, if the width of the parent element changes, they will also change.
The following rule sets the inner margin of the paragraph to 10% of the parent element width:

Java code

1. p {padding: 10%;}

For example, if the parent element of a paragraph is a DIV element, its padding is calculated based on the width of the div.

Java code

1. <div style= "width: 200px;" >  
2. <p>This paragragh is contained within a  Div that has a width of 200 pixels.</p>   
3. </div>   

Note: the upper and lower padding is consistent with the left and right padding, that is, the percentage of the top and bottom padding is set relative to the parent element width, not relative to the height.

CSS Inner Margin properties



2.3CSS Border
The bounding rectangle (border) of an element is one or more lines around the content and padding of the element.
The CSS border property allows you to specify the style, width, and color of the element's border.

CSS Border
In HTML, we use tables to create borders around text, but by using CSS border properties, we can create well-performing borders that can be applied to any element.
The outer margin of the element is the bounding rectangle of the element (border). The border of an element is one or more lines around the element's content and the inner edge.
Each border has 3 facets: width, style, and color. In the following space, we will give you a detailed explanation of these three aspects.

borders and Backgrounds
The CSS specification states that the border is drawn above the background of the element. This is important because some borders are "intermittent" (for example, a dotted border or a dashed box), and the elements ' backgrounds should appear between the visible parts of the border.
CSS2 indicates that the background extends only to the inner margin, not to the bounding rectangle. Later CSS2.1 was corrected: the background of the element is the content, the padding, and the background of the bounding area. Most browsers follow the CSS2.1 definition, but some older browsers may behave differently.

style of border
A style is one of the most important aspects of a border, not because the style controls the display of the border (of course, the style does control the display of the border), but because if there is no style, there is no border at all.
The Border-style property of CSS defines 10 different non-inherit styles, including none.
For example, you can define a picture's border as outset to make it appear as a "raised button":

Java code

1. A:link img {border-style:outset;}

Define multiple styles
You can define multiple styles for a border, for example:

Java code

1. p.aside {border-style:solid dotted dashed double;}

The above rule defines four border styles for a paragraph with the class name aside: A solid top border, a dotted right box, a dashed border, and a double line left border.
And we see the values here are in the order of Top-right-bottom-left, and we've seen this order when setting different padding with multiple values.

Defining a single- sided style
If you want to set a border style for an edge of an element box instead of setting all 4-edged border styles, you can use the following single-sided border style properties:
? border-top-style
? border-right-style
? border-bottom-style
? border-left-style
So the two methods are equivalent:

Java code

1. p {Border-style:solid solid solid none;}
2. p {border-style:solid; border-left-style:none;}

Note: If you want to use the second method, you must put the single-sided attribute after the shorthand attribute. Because the value of the shorthand property overrides the single-sided value of None if the unilateral attribute is placed before border-style.

width of border
You can specify a width for a border by using the Border-width property.
There are two ways to specify a width for a border: You can specify a length value, such as 2px or 0.1em, or use one of 3 keywords, thin, medium (default), and thick, respectively.
notes: CSS does not define the specific width of the 3 keywords, so one user agent may set thin, medium, and thick to be equal to 5px, 3px, and 2px respectively, while the other user agent is set to 3px, 2px, and 1px, respectively.
So, we can set the width of the border:

Java code

1. p {border-style:solid; border-width:5px;}

Or:

Java code

1. p {border-style:solid; border-width:thick;}

defining single-sided widths
You can set each side border of an element in the order of Top-right-bottom-left:

Java code

1. p {border-style:solid; border-width:15px 5px 15px 5px;}

The above example can also be abbreviated (this is called value copying):

Java code

1. p {border-style:solid; border-width:15px 5px;}

You can also set the width of each edge of the border individually by the following properties:
? border-top-width
? border-right-width
? border-bottom-width
? border-left-width
Therefore, the following rules are equivalent to the above example:

Java code

1. p {
2. Border-style:solid;
3. border-top-width:15px;
4. border-right-width:5px;
5. border-bottom-width:15px;
6. border-left-width:5px;
7. }

No Border
In the previous example, you have seen that if you want to display a certain border, you must set the border style, such as solid or outset.
So what happens if you set Border-style to none:

Java code

1. p {border-style:none; border-width:50px;}

Although the width of the border is 50px, the border style is set to none. In this case, not only the style of the border is not, its width will also become 0. The border disappears, why?

This is because if the border width is 0, that is, the border does not exist at all, then the border cannot have width, so the border width is automatically set to 0, regardless of what you originally defined?

It is important to remember this. In fact, forgetting to declare a border style is a common mistake. All H1 elements will not have any borders, let alone 20 pixels wide, according to the following rules:

Java code

1. h1 {border-width:20px;}

Since the default value of Border-style is none, if no style is declared, it is equivalent to Border-style:none. Therefore, if you want the border to appear, you must declare a border style.

color of the border
Setting the border color is simple. CSS uses a simple Border-color property that accepts up to 4 color values at a time.

You can use any type of color value, such as a named color or a hexadecimal and RGB value:

Java code

1. p {
2. Border-style:solid;
3. Border-color:blue RGB (25%,35%,45%) #909090 Red;
4. }

If the color value is less than 4, the value copy will work. For example, the following rule declares that the upper and lower borders of a paragraph are blue and the left and right borders are red:

Java code

1. p {
2. Border-style:solid;
3. Border-color:blue Red;
4. }

Note: The default border color is the foreground of the element itself. If no color is declared for the border, it will be the same as the text color of the element. On the other hand, if the element does not have any text, assuming it is a table that contains only the image, the border color of the table is the text color of its parent element (because color can inherit). This parent element is most likely a body, Div, or another table.

defining single-sided colors
There are also some unilateral border color properties. They have the same principle as the single-sided style and width properties:
? border-top-color
? border-right-color
? border-bottom-color
? border-left-color
To specify a solid black border for the H1 element, and the right border is a solid red, you can specify:

Java code

1. H1 {
2. Border-style:solid;
3. Border-color:black;
4. border-right-color:red;
5. }

Transparent Border
As we have just said, if the border has no style, there is no width. However, there are situations where you might want to create an invisible border.
CSS2 introduces the border color value transparent. This value is used to create an invisible border with a width. Take a look at the following example:

HTML code

1. <a href="#">aaa</a>
2. <a href="#">bbb</a>
3. <a href="#">ccc</a>

We have defined the following styles for the links above:

Java code

1. a:link, a:visited {  
2.   border-style:  solid;  
3.   border-width: 5px;  
4.    border-color: transparent;  
5.   }  
6. a:hover { Border-color: gray;}   

In a sense, using transparent, the use of borders is like an extra padding, and there's a benefit to making it visible in the way you need it. This transparent border is equivalent to the padding, because the background of the element extends to the bounding area (if there is a visible background).

Important: prior to IE7, Ie/win did not provide support for transparent. In previous versions, IE set the border color based on the color value of the element.

CSS Border Properties



2.4CSS outer margin
An empty area around the border of an element is the margin. Setting the margin creates an extra "blank" outside the element.
The simplest way to set the margin is to use the margin property, which accepts any length units, percentages, or even negative values.

CSS Margin Property
The simplest way to set the margin is to use the margin property.
The margin property accepts any length unit, which can be pixels, inches, millimeters, or EM.
Margin can be set to auto. A more common practice is to set the length value for the margin. The following declaration sets a 1/4-inch-wide gap on each edge of the H1 element:

Java code

1. H1 {margin: 0.25in;}

The following example defines a different margin for each of the four sides of the H1 element, using pixels (px) in length:

Java code

1. H1 {margin:10px 0px 15px 5px;}

As with the padding settings, the order of these values is rotated clockwise around the elements starting from the top margin:
Margin:top Right Bottom Left

Alternatively, you can set a percentage value for margin:

Java code

1. p {margin: 10%;}

Percentages are calculated relative to the width of the parent element. The above example sets the margin for the P element to be 10% of the width of its parent element.

The default value for margin is 0, so if you do not declare a value for margin, there is no margin. However, in practice, the browser has provided a predetermined style for many elements, and margins are no exception. For example, in a browser that supports CSS, margins generate a "blank line" above and below each paragraph element. Therefore, if the margin is not declared for the P element, the browser may apply an outer margin on its own. Of course, the default style will be overridden as long as you specifically make a declaration.

Value Replication
Do you remember? We have mentioned value replication in the first two sections. Here we explain how to use value replication.
Sometimes, we enter some duplicate values:

Java code

1. p {margin: 0.5em 1em 0.5em 1em;}

With value replication, you don't have to type this pair of numbers repeatedly. The above rules are equivalent to the following rules:

Java code

1. p {margin: 0.5em 1em;}

These two values can replace the previous 4 values. How is this done? CSS defines rules that allow for margins to be specified with less than 4 values. The rules are as follows:
? If the value of the left margin is missing, the value of the right margin is used.
? If the value of the bottom margin is missing, the value of the top margin is used.
? If the value of the right margin is missing, the value of the top margin is used.

Provides a more intuitive way to understand this:



In other words, if you specify 3 values for the margin, the 4th value (that is, the left margin) is copied from the 2nd value (the right margin). If two values are given, the 4th value is copied from the 2nd value, and the 3rd value (bottom margin) is copied from the 1th value (the top margin). In the last case, if only one value is given, the other 3 margins are copied from this value (the top margin).

With this simple mechanism, you only need to specify the necessary values without having to apply all 4 values, for example:

Java code

1. H1 {margin: 0.25em 1em 0.5em;} / * equivalent to 0.25em 1em 0.5em 1em * /
2. H2 {margin: 0.5em 1em;} / * equivalent to 0.5em 1em 0.5em 1em * /
3. p {margin:1px;} / * equivalent to 1px 1px 1px 1px * /

There is a small drawback to this approach, and you will definitely encounter this problem in the end. Suppose you want to set the top margin and left margin of the P element to 20 pixels, and the bottom and right margins to 30 pixels. In this case, you must write:

Java code

1. p {margin:20px 30px 30px 20px;}

This will give you the results you want. Unfortunately, there is no way to reduce the number of required values in this case.

Let's look at another example. If you want all other margins except the left margin to be auto (the left margin is 20px):

Java code

1. p {margin:auto Auto auto 20px;}

The same way you can get the results you want. The problem is that typing these auto is a bit of a hassle. If you just want to control the margin on the side of the element, use the unilateral margin property.

Unilateral margin Properties
You can use the unilateral margin property to set the value for the margin on the element's side. Suppose you want to set the left margin of the P element to 20px. Instead of using margin (you need to type a lot of auto), you can use the following methods:

Java code

1. p {margin-left:20px;}

You can use any of the following properties to set only the corresponding margin, without affecting all other margins directly:
? margin-top
? margin-right
? margin-bottom
? margin-left
Multiple such unilateral attributes can be used in a rule, such as:

Java code

1. H2 {
2. margin-top:20px;
3. margin-right:30px;
4. margin-bottom:30px;
5. margin-left:20px;
6. }

Of course, it may be easier to use margin for this scenario:

Java code

1. p {margin:20px 30px 30px 20px;}

The results are the same whether you use a single-sided attribute or a margin. In general, if you want to set margins for multiple edges, it is easier to use margin. However, from the perspective of the document display, it is not important to actually use any of the methods, so you should choose a method that is easier for you.

Tips: The default margin (margin) value defined by Netscape and IE on the body tag is 8px. And Opera is not like that. In contrast, opera defines the default value for internal padding (padding) as 8px, so if you want to adjust the edge portion of the entire site and display it correctly in opera, you must customize the body's padding.

CSS Margin Properties

CSS Box model