CSS _ Box Model

The so-called box model is the Rectangular Box generated by the browser for each HTML element. That is, HTML pages are actually composed of a series of boxes. These boxes are arranged on the page according to the visible layout. It is controlled by three attributes: position, display, and float.

Position attribute: controls the positional relationship between page elements.

Display attribute: controls the stack, side by side, and display of elements.

Float attribute: provides a control method to make elements into multi-column la s

 

We cannot see the box by default.

Each box has three attributes:

Border: You can set the border width, style, and color.

Padding: You can set the padding between the content area of the box and the border.

Margin (margin): sets the gap between the box and the box.

I will use a picture below to show it.

A box has four days. Therefore, the margins, inner margins, and outer margins have the top, right, bottom, and left sides.

Okay, so much nonsense. Let's demonstrate it.

First, create an HTML document with two paragraphs

CSS box model demonstration/
Charset = "UTF-8"
Href = "in_css/box" rel = "stylesheet" type = "text/css"
/

Class = "p_1"
Xishan snow three cities, Nanpu Qingjiang Wanli bridge.
The wind and dust in the sea are separated by many younger siblings, and Tianya is in tears.
However, they will be late for multiple diseases and will not be able to respond to the San Chao.
When the horse was out of the suburbs, it was terrible.

/
Class = "p_2"
Jin Se has fifty strings for no reason, and a string is a Sihua Nian.
Zhuang Sheng Xiaomeng fan butterfly, hope the Emperor spring heart to trust the cuckoo.
There are tears in the pearl of the sea and the moon.
This situation can be recalled, but it was not clear at the time.

/

/
/

Then, set the margin of the first paragraph to PX and view the effect in the browser.

We can see the margin of the entire section.

 

When writing a style for each margin separately. Shown below

    -: 
    -: 
    -: 
    -: 

}

 

Abbreviations:

①

    : 

}

Not fully written

By default, the outer margin is set clockwise. ② the opposite edge value is automatically obtained.

The last outer left margin of the above Code is not written, and it will automatically take the value of the right margin. Similarly, you can save the off-margin (3) and write only one value.

The values of all the four margins are the same ......