Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what is the difference between margin and padding in css". In daily operation, I believe that many people have doubts about the difference between margin and padding in css. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the question of "what is the difference between margin and padding in css?" Next, please follow the editor to study!

The difference between margin and padding in css is: margin refers to the distance from its own frame to another container border, that is, the outer margin of the container; padding refers to the distance between its own border and another container border, that is, the inner margin of the container.

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

What is the difference between margin and padding in css

1. The margin shorthand property sets all the outer margins properties in a declaration. This property can have 1 to 4 values.

This shorthand property sets the width of all the outer margins of an element, or sets the width of the outer margins on each side.

The vertical adjacent outer margins of block-level elements are merged, while inline elements do not actually occupy the upper and lower outer margins. The left and right margins of inline elements are not merged. Similarly, the outer margins of floating elements are not merged. A negative margin value is allowed, but be careful when using it.

Negative values are allowed for margin.

Examples are as follows:

P.margin {margin: 1cm 2cm 3cm 4cm}

This paragraph does not specify an outer margin.

This paragraph has a specified margin. This paragraph has a specified margin. This paragraph has a specified margin. This paragraph has a specified margin. This paragraph has a specified margin.

This paragraph does not specify an outer margin.

Output result:

2. The padding shorthand property sets all the inner margins properties in a declaration.

This abbreviated property sets the width of all the inner margins of the element, or sets the width of the inner margins on each side. The inner margin set on an inline non-replacement element does not affect the row height calculation; therefore, if an element has both an inner margin and a background, it may visually extend to other lines and may overlap with other content. The background of the element extends through the inner margin. A negative margin value is not allowed.

Negative values are not allowed in padding.

Examples are as follows:

Td.test1 {padding: 1.5cm} td.test2 {padding: 0.5cm 2.5cm} each edge of the table cell has an equal inner margin. The top and bottom inner margins of this table cell are 0.5cm, and the left and right inner margins are 2.5cm.

Output result:

3. Difference:

Margin refers to the distance from its own border to the border of another container, that is, the distance outside the container.

Padding refers to the distance between its own border and another container border inside itself, that is, the distance within the container.

At this point, the study on "what is the difference between margin and padding in css" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.