6_常见样式-margin

  首先,margin这个简写属性设置一个元素全部外边距的宽度,或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。一样地,浮动元素的外边距也不会合并。html

  注意,容许指定负的外边距值,不过使用时要当心。spa

  Margin的值是数字+html单位,同时也能够为auto(自动、自适应,auto只有水平方向,没有垂直方向。)code

margin-left:5px; 左边外延距离5px  对象左边外延边距
margin-right:5px; 右边外延距离5px 对象右边外延边距 
margin-top:5px; 上边外延距离5px 对象上边外延边距 
margin-bottom:5px; 下边外延距离5px 对象下边外延边距

margin-left: auto; (元素在父级中居右显示)
margin-right: auto;(元素在父级中居左显示)
margin: 0 auto; (元素在父级中水平居中显示)

  多值写法:
          两个值 (上下) (左右)
          三个值 (上) (左右) (下)
          四个值 (上) (右) (下) (左)htm

 

  margin和padding的区别 :
          1. margin在元素的边框之外,padding在元素的边框以里
          2.margin区域不显示元素的背景,padding显示元素的背景
          3. margin一般用来给两个同级元素加距离,padding用来添加元素和它内容之间的距离    对象

  margin的两个特性:blog

    margin 叠加
              两个相邻元素的上下margin是叠加在一块儿的,两个元素之间的距离,以大的为准    

    margin传递
              元素的上下margin,会传递给父级    

   class

相关文章
相关标签/搜索