The attitude of block-level elements and inline elements to margin and padding

1, block-level elements

Margin: As with the standard, set the block-level element border with sibling elements or parent elements of the distance, commonly known as the margin.

padding: extends the bounding rectangle (that is, the position of the content in the element that overrides the element's dimensions), and when the border touches the boundary of the parent or sibling element, it extends in the opposite direction, changing the position of the contents of the element.

Padding Demo:

As is

HTML: <div> block-level elements </div>css:div{  width:100px;   border:1px solid #000;}

　　

After adding padding:

div{  width:100px;  border:1px solid #000;     padding-top:10px;/* extends the padding upward, the top of the touch extends, the element content moves down/  padding-bottom:40px/* extends the inner margin, does not touch the boundary, so the element content position is unchanged */  }

2. Inline elements

Margin: Invalid (UP), valid (right), invalid (bottom), valid (left)

As is

Html:

<a class= ' TestID ' >
Inline elements
</a>
<a class= ' T2 ' >
Inline elements
</a>
<div> block-level elements </div>

Css:

. testid{
border:1px solid #000;
}
. t2{
border:1px solid red;
}
div{
width:100px;height:50px;
BORDER:1PX solid blue;
}

After setting the margin:

. testid{  border:1px solid #000;     margin:50px 5px 20px 30px;/* margin settings */}.t2{  border:1px solid red;} div{  width:100px;height:50px;  BORDER:1PX solid Blue;}

　　

padding: Extends the bounding rectangle, touches the parent element or child element boundary, continues to extend the border does not move the element content position (up and down). Extending the border, touching the parent element or child element boundary moves in the opposite direction, changing the content position as if it were a block-level element (left or right).

The attitude of block-level elements and inline elements to margin and padding