CSS tutorial part4 [Box Model] (Excerpted from W3C School)

ArticleDirectory

• CSS padding
• CSS border
• CSS margin
• CSS margin merge

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

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;

}

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.

TIPS: Use the margin attribute whenever possible to control the element location and layout.

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.

Padding: Set all padding attributes in a declaration.

Padding: 10px 5px 15px 20px; top, right, bottom, left (Clockwise)

Padding: 10px 5px 15px; top, left, right, bottom

Padding: 10px 5px; up/down, left/right

CSS padding attributes

CSS border

The border of an element is one or more lines around the content and padding of the element.The CSS border attribute allows you to specify the style, width, and color of the element border.

Border Style

Style is the most important aspect of the border. This is not because the style controls the display of the border (of course, the style does control the display of the border), but because there is no border if there is no style.

The border-style attribute of CSS defines 10 different non-inherit styles, including none.

The border-style attribute is used to set the style of all borders of an element, or to set the border style for each edge separately.

Border-style: dotted solid double dashed; the upper border is a point, the right border is a solid line, the bottom border is a double line, the left border is a dotted line

The two methods are equivalent:You must put the single-sided attribute after the abbreviated attribute. Because if you place a single-side Attribute before border-style, the value of the abbreviated attribute overwrites the value of the single-side attribute none..

P {border-style: SOLID none;} p {border-style: solid; border-left-style: none ;}

 

Border Width

The abbreviation of border-width attribute is to set the width of all borders of an element, or to set the width of each border separately.

In fact, forgetting to declare the border style is a common mistake. If no style is declared, that is, the border does not exist, the border cannot have width, so the Border width is automatically set to 0.

Border color

The border-color attribute is a short attribute. You can set the colors of visible parts of all borders of an element, or set different colors for the four sides.

 

Transparent border

As we mentioned earlier, if the border has no style, there will be no width.However, in some cases, you may 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. See the following example:

A: Link, A: visited {

Border-style: solid;

Border-width: 5px;

Border-color: transparent;

}

A: hover {

Border-color: Gray;

}

In a sense, the use of transparent is like an extra padding. In addition, the advantage is that it can be visible when you need it. This transparent border is equivalent to the padding, because the background of the element will extend to the border area (if there is a visible background ).

CSS border attributes:

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. (Percentages are calculated based on the width of the parent element)

Set all margin attributes in one declaration. This attribute can have 1 to 4 values.

CSS margin attributes

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.

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.

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