码迷,mamicode.com
首页 > 其他好文 > 详细

padding和margin的区别和作用及各种场合出现的bug

时间:2018-01-04 11:09:23      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:区别   可见   文字   ott   button   属性   ges   定位   元素   

一、padding

 Padding: 包括padding-top, padding-right, padding-bottom, padding-left, 控制块级元素内部, content与border之间的距离

1、语法结构

(1)padding-left:10px; 左内边距

(2)padding-right:10px; 右内边距

(3)padding-top:10px; 上内边距

(4)padding-bottom:10px; 下内边距

(5)padding:10px; 四边统一内边距

(6)padding:10px 20px; 上下、左右内边距

(7)padding:10px 20px 30px; 上、左右、下内边距

(8)padding:10px 20px 30px 40px; 上、右、下、左内边距

二、margin

  Margin: 包括margin-top, margin-right, margin-bottom, margin-left, 控制块级元素之间的距离, 它们是透明不可见的。

1、语法结构

(1)margin-left:10px; 左外边距

(2)margin-right:10px; 右外边距

(3)margin-top:10px; 上外边距

(4)margin-bottom:10px; 下外边距

(5)margin:10px; 四边统一外边距

(6)margin:10px 20px; 上下、左右外边距

(7)margin:10px 20px 30px; 上、左右、下外边距

(8)margin:10px 20px 30px 40px; 上、右、下、左外边距

 

三、margin和padding的区别用图表示为

 

技术分享图片

 IE8下input[button | submit] 设置margin:auto无法居中bug:

  发生场合:ie8下,如果给像button这样的标签(如button input[type="button"] input[type="submit"])设置{ display: block; margin:0 auto; }如果不设置宽度的话无法居中。

  解决方法:可以给为input加上宽度。

IE8百分比padding垂直margin bug:

  发生场合:当父元素设置了百分比的padding,子元素有垂直的margin的时候,就好像父元素被设置了margin一样。

  解决方法:给父元素加一个overflow:hidden/auto。

IE6/7下margin与absolute元素重叠bug:

  发生场合:双栏自适应布局中,左侧元素absolute绝对定位,右侧的margin撑开距离定位。在IE6/7下左侧应用了absolute属性的块级元素与右边的自适应的文字内容重叠。

  解决方法:把左侧块级元素更改为内联元素,比如把div更换为span。

padding和margin的区别和作用及各种场合出现的bug

标签:区别   可见   文字   ott   button   属性   ges   定位   元素   

原文地址:https://www.cnblogs.com/king-govern/p/8191007.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!