[分享]css内外边距看不太懂

最近在学习CSS的时候，发现对于CSS的内外边距这一块特别看不懂。一开始还以为是自己太蒻了，后来才发现是这一块不太好理解，今天就来分享一下我自己是怎么理解的。首先，CSS的盒模型是大家都熟悉的，一个盒...

最近在学习CSS的时候，发现对于CSS的内外边距这一块特别看不懂。一开始还以为是自己太蒻了，后来才发现是这一块不太好理解，今天就来分享一下我自己是怎么理解的。
首先，CSS的盒模型是大家都熟悉的，一个盒子包含了四个方向的边框（border）、内边距（padding）、外边距（margin）以及盒子本身的内容（content）。初学者容易不理解的是内外边距的区别，看下面的代码块：

 p {
        padding: 10px;
        margin: 20px;
    } 

我们设置了一个段落的内边距是10px，外边距是20px，但是这20px的外边距是针对父元素而言的，也就是说如果外层的容器大小只有100px，那么这个段落的实际显示空间就只有60px了。
其次，内外边距还有一些属性值可以取，比如padding-top、padding-right、padding-bottom、padding-left等等。这些属性值可以针对不同的方向进行设置，例如：

 p {
        padding: 10px 20px 30px 40px;
    } 

这段代码就是让段落的上内边距为10px，右内边距为20px，下内边距为30px，左内边距为40px。同样的，margin也是有对应的属性值的，可以让我们更精准地掌控元素的位移。
最后，由于内外边距的设置总是会和盒子大小有关，我们在设置的时候最好用百分比来定位。因为百分比相对于父元素进行计算，可以根据父元素的变化自适应调整。
总之，CSS的内外边距在布局中是非常重要的一部分，我们需要认真理解和掌握。通过练习和实践，才能更好的运用它来达到我们想要的效果。