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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.