Basic concept of Box model

Box model

Specifies how the element frame handles element content , padding, border spacing, and margins .

1. Inner margin

The inner margin of an element is between the border and the content area. The simplest property to control the area is padding

Property.

Padding: Shorthand property.

Padding-bottom: Sets the bottom padding of the element.

Padding-top: Sets the top padding of an element.

Padding-left: Sets the left padding of the element.

Padding-right: Sets the right padding for the element.

padding:10px Four Directions

: 10px 20px up or down

: 10px 20px 30px up or down

: 10px 20px 30px 40px upper right Down left

2, border (can do triangle)

(border) is one or more lines around an element's content and padding.

Border-style:none, dotted, dashed, double, solid

Border-width

Border-color (default = Transparent)

Make a triangle:

div{

width:0px;

height:0px;

border-top:900px Red Solid;

border-left:900px transparent solid;

border-right:900px transparent solid;

border-bottom:900px transparent solid;

}

<div></div>

3, margin (margin: can be negative)

An empty area around the border of an element is the margin. Setting the margin creates extra "whitespace" outside the element, using the same padding.

Note: margin:0 Auto Centers The block-level elements horizontally.

4. Outer margin merger

Margin merging means that when two vertical margins meet, they form an outer margin.

The height of the merged margin is equal to the greater of the two of the height in which the merged margins occur.

. div1,.div2{

height:500px;

width:300px;

border:2px dashed red;

}

. div1{

margin-bottom:200px;

}

. div2{

margin-top:100px;

}

<div class= "Div1" >fjkalj</div>

<div class= "Div2" > Customer service Come in </div>

Basic concept of Box model