margin,padding之我见

Posted 2020-08-11

  在网页布局中，margin和padding绝对会占很重要的作用，但是在实际的项目中，很多新手前端程序员们往往不能正确的使用它们，导致会出现一些不必要的麻烦，下面是我在前几天的项目中遇到的一些问题，以及个人总结的一些方法，仅供参考。

  想比margin，padding则是要乖巧的多，几乎没有让你不省心的地方，我们知道，简单的padding语法有四种：

   eg：1.div1{padding:1px;}  (表示上下左右的内边距都是1PX)

         2.div2{padding:1px 2px}; (上下边距是1PX，左右边距是2px);

         3.div3{padding:1px 2px 3px};  上边距是1px,左右边距是2px,下边距3px；

         4.div4{padding：1px 2px 3px 4px};  依次为上边距1PX，右为2px，下3px，左4px

其实总结就是一句话，从上边距开始，顺时针旋转赋值。其次，需要注意的话，padding没有负值，及时你给定值为负，也会当0处理。

margin情况要比Padding复杂一些，语法也和Padding一样，但是需要注意的主要有下面几个地方：

1.margin是允许负边距的，这在做一些叠加效果或是处理inline-block留白的时候很好用。

2.margin的外边距合并只存在垂直方向上。

3.行内元素只有左右两边的margin值，但须记住非可置换元素如img,textarea,select,button.,label,object也是可以设置垂直方向的margin的。

4.有一些情况垂直方向上的margin是不会合并的，比如：1.绝对定位元素不会与任何元素的外边距合并；2.浮动元素不会与任何元素的外边距合并；

                                                                        3.inline-block不会与任何元素的外边距合并。

                                                                        4.overflow取值为visible以外的元素与它的子元素不会合并

5.处理塌陷时的几种方法（一个盒子如果没有上补白和上边框，那么这个盒子的上边距会和哎内部文档流中的第一个子元素的上边距重叠，设置子元素margin-top，就会产生塌陷）。

      1.给父元素加overflow:hidden;

      2.设置父元素或子元素浮动；

      3.给父元素加绝对定位；

      4.父元素加padding或border；

      5.将margin-top改为padding-top；

 

最后总结一下，在网页开发中，margin和padding都是经常使用的，那么我们应该何时用padding呢：1.希望在border内侧加空白时。2.空白需背景色时。3.上下两个盒子的空白，希望等于两者之和时。如果情况与上诉三种相反，那么我们不妨试试margin这个万能的东东吧！