what is the padding's role on the css and html

2018-06-09 21:16:10

This question already has an answer here:

When to use margin vs padding in CSS [closed] 18 answers

As you can see in the image (shared by Josh) :

Say you have an element c with parent p.

Padding : When applied to p, adds space inside p, but outside c.

Padding : When applied to c, adds space inside c.

Margin : When applied to c, adds space outside c, but inside p.

Margin : When applied to p, adds space outside p, but inside p's parent.

You may notice that 1st & 3rd case look alike when only p & c are considered.

Padding is the distance from the outer border of an element to the inner part which contains the children.

+------------+
|  (Padding) |
|  +------+  |<--- Outer Border
|  |(con- |  |
|  | tent)|  |

Note however, that in browsers like Firefox and Chrome by default the padding gets added to the width of the element.

链接地址: http://www.djcxy.com/p/29420.html