CSS Learning (ii) Box Model Overview

The CSS box model specifies how the element content, padding, border, and padding are processed by the element box.

1. CSS box model Overview

The inmost part of the element box is the actual content, and the content is directly surrounded by the padding. The padding shows the background of the element. The edge of the padding is the border. The outer border is the outer margin, and the outer margin is transparent by default, so it does not block any subsequent elements.

The padding, border, and margin are optional. The default value is zero. However, many elements are configured with the outer and inner margins by the user proxy style sheet. You can overwrite these browser styles by setting the margin and padding values to zero. This can be done separately, or you can use the universal selector to set all elements:

 
* {Margin: 0; padding: 0 ;}
 

In CSS, width and height indicate the width and height of the content area. Adding the padding, border, and margin does not affect the size of the content area, but increases the size of the element box.

Assume that each side of the box has a margin of 10 pixels and a margin of 5 pixels. If you want the element box to reach 100 pixels, you need to set the content width to 70 pixels. See:

 
# Box {width: 70px; margin: 10px; padding: 5px ;}
 

Tip: the padding, border, and outer margin can be applied to all edges of an element or individual edges.

Tip: the outer margin can be a negative value. In many cases, the outer margin of a negative value must be used.

Browser compatibility

Once an appropriate DTD is set for the page, most browsers will render the content as shown in the figure above. However, the presentation of IE 5 and 6 is incorrect. According to W3C standards, the space occupied by element content is set by the width attribute, and the padding and border values around the content are calculated separately. Unfortunately, ie5.x and 6 use their own non-standard models in the weird mode. The width attribute of these browsers is not the width of the content, but the sum of the width of the content, padding, and border.

Although there is a way to solve this problem. However, the best solution is to avoid this problem. That is, do not add the padding with the specified width to the element, but try to add the padding or padding to the parent and child elements of the element.

Term Translation

• Element: element.
• Padding: padding, which can be translated as padding.
• Border: border.
• Margin: margin, which can also be translated into blank or blank edges.

In w3school, padding and margin are collectively referred to as the inner and outer margins. The blank inside the border is the padding, and the blank outside the border is the padding. It's easy to remember :)

2. CSS padding

The padding of an element is between the border and the content area. The simplest attribute to control this area is the padding attribute.

The CSS padding attribute defines the blank area between the element border and the element content.

CSS padding attributes

The CSS padding attribute defines the padding of an element. The padding attribute accepts length or percentage values, but does not allow negative values.

For example, if you want the sides of all H1 elements to have a 10-pixel padding, you only need:

 
H1 {padding: 10px ;}
 

You can also set the padding of each edge in the order of top, right, bottom, and left. Different units or percentages can be used for each edge:

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

Single Side padding attribute

You can also set the top, right, bottom, and left padding by using the following four independent attributes:

• Padding-top
• Padding-Right
• Padding-bottom
• Padding-left

You may have thought that the effects of the following rules are exactly the same as those described above:

 
H1 {padding-top: 10px; padding-Right: 0.25em; padding-bottom: 2ex; padding-left: 20% ;}
 

Percentage of padding

As mentioned above, you can set a percentage value for the inner margin of an element. The percentage 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 also change.

The following rule sets the padding of a paragraph to 10% of the width of the parent element:

 
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.

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

Note: The top and bottom margins are the same as the left and right margins. That is, the percentage of the top and bottom margins is set relative to the width of the parent element, rather than relative to the height.

 

3. CSS margin

The margin is centered around the blank area of the element border. When the margin is set, an extra "blank" is created outside the element ".

The simplest way to set the margin is to use the margin attribute, which accepts any length unit, percentage value, or even negative value.

CSS margin attributes

The simplest way to set the margin is to use the margin attribute.

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 outer margin. The following declaration sets a blank area of 1/4 inch on each side of the H1 element:

 
H1 {margin: 0.25in ;}
 

The following example defines different margins for the four sides of the H1 element. The unit of length used is pixel (PX ):

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

As with the padding settings, these values are rotated clockwise from the top:

 
Margin: Top right bottom left
 

You can also set a percentage value for margin:

 
P {margin: 10% ;}
 

The percentage is calculated relative to the width of the parent element. In the preceding example, the margin set for the P element is 10% of the width of its parent element.

The default value of margin is 0, so if a value is not declared for margin, no margin will appear. However, in reality, the browser has provided a predefined style for many elements, and the margin is no exception. For example, in a browser that supports CSS, the margin will generate an "empty line" above and below each section element ". Therefore, if the outer margin is not declared for the P element, the browser may apply the outer margin by itself. Of course, if you make a special declaration, the default style will be overwritten.

Copy Value

Remember? We mentioned value replication in the previous two sections. The following describes how to use value replication.

Sometimes, we enter repeated values:

 
P {margin: 0.5em 1em 0.5em 1em ;}
 

By copying values, you do not have to repeat these numbers. The above rules are equivalent to the following rules:

 
P {margin: 0.5em 1em ;}
 

These two values can replace the first four values. How is this done? CSS defines rules that allow you to specify less than four values for the margin. The rules are as follows:

• If the left margin value is missing, the right margin value is used.
• If the value of the margin is missing, the value of the margin is used.
• If the value of the right margin is missing, the value of the top margin is used.

It provides a more intuitive way to understand this:

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

With this simple mechanism, you only need to specify the necessary values, instead of applying all four values, for example:

H1 {margin: 0.25em 1em 0.5em;}/* equivalent to 0.25em 1em 0.5em 1em */H2 {margin: 0.5em 1em ;} /* equivalent to 0.5em 1em 0.5em 1em */P {margin: 1px;}/* equivalent to 1px 1px 1px */
 

This method has a small disadvantage, and you will encounter this problem in the end. Assume that you want to set the top and left margins of the P element to 20 pixels, and the bottom and right margins to 30 pixels. In this case, you must write:

 
P {margin: 20px 30px 30px 20px ;}
 

In this way, you can get the expected results. Unfortunately, in this case, there is no way to have fewer values.

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

 
P {margin: auto 20px ;}
 

In this way, you can get the desired effect. The problem is that it is troublesome to Type Auto. If you only want to control the outer margin on one side of an element, use the outer margin attribute.

Unilateral margin attributes

You can use the single-side margin attribute to set the value of the single-side margin of an element. Suppose you want to set the left margin of the P element to 20px. Instead of using margin (a lot of auto is required), you can use the following methods:

 
P {margin-left: 20px ;}
 

You can use any of the following attributes to set only the corresponding margin, without directly affecting all other margins:

• Margin-top
• Margin-Right
• Margin-bottom
• Margin-left

Multiple such unilateral attributes can be used in a rule, for example:

 
H2 {margin-top: 20px; margin-Right: 30px; margin-bottom: 30px; margin-left: 20px ;}
 

Of course, in this case, using margin may be easier:

 
P {margin: 20px 30px 30px 20px ;}
 

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

Tips and comments

Tip: the default margin (margin) value defined by Netscape and IE for the body label is 8px. This is not the case with opera. Conversely, opera defines the default value of inner padding as 8px, so if you want to adjust the edge of the entire website and display it correctly in opera, the padding of the body must be customized.

 

4. CSS margin merge

The outer margin merge means that when two vertical outer margins meet, they form an outer margin.

The height of the merged margin is equal to the larger of the two merged margins.

Outer margin merge

Outer margin Merge (superposition) is a simple concept. However, in practice, layout a webpage is confusing.

In short, the outer margin merge means that when two vertical outer margins meet, they form an outer margin. The height of the merged margin is equal to the larger of the two merged margins.

When an element appears on another element, the bottom margin of the first element is merged with the top margin of the second element. See:

When an element is contained in another element (if there is no padding or the border separates the outer margin), the upper and/or lower margins are also merged. See:

Although it looks strange, the margin can even be merged with itself.

Suppose there is an empty element with an outer margin but no border or fill. In this case, the top and bottom margins are met together and they will be merged:

If this margin encounters the margin of another element, it will also be merged:

This is why a series of paragraph elements occupy a very small space, because all their margins are merged to form a small margin.

The outer margin merging may seem a bit strange at the beginning, but it actually makes sense. Take a typical text page composed of several paragraphs as an example. The space above the first paragraph is equal to the margin above the paragraph. If no margin is merged, the margin between all subsequent sections will be the sum of the adjacent top margin and bottom margin. This means that the space between paragraphs is twice that at the top of the page. If the outer margin is merged, the upper and lower margins of the paragraphs are merged, so that the distance between the sections is the same.

Note: Only the vertical outer margin of the block box in the normal document flow can be merged. The margin between the inside box, floating box, or absolute positioning is not merged.