CSS内边距和外边距
2016-12-05 22:44
169 查看
内边距: 边框于内容之间的距离。
外边距:边框于边框之间的距离。
简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图:
![](http://www.w3school.com.cn/i/ct_css_margin_collapsing_example_1.gif)
以上概念内容赖在w3cschool,具体的设置需要自己编写实例来验证
外边距:边框于边框之间的距离。
CSS 内边距属性
属性 | 描述 |
---|---|
padding | 简写属性。作用是在一个声明中设置元素的所内边距属性。 |
padding-bottom | 设置元素的下内边距。 |
padding-left | 设置元素的左内边距。 |
padding-right | 设置元素的右内边距。 |
padding-top | 设置元素的上内边距。 |
CSS 外边距属性
属性 | 描述 |
---|---|
margin | 简写属性。在一个声明中设置所有外边距属性。 |
margin-bottom | 设置元素的下外边距。 |
margin-left | 设置元素的左外边距。 |
margin-right | 设置元素的右外边距。 |
margin-top | 设置元素的上外边距。 |
外边距合并
外边距合并(叠加)是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图:
![](http://www.w3school.com.cn/i/ct_css_margin_collapsing_example_1.gif)
以上概念内容赖在w3cschool,具体的设置需要自己编写实例来验证
相关文章推荐
- (转)css内边距与外边距的区别,精辟啊
- css内边距与外边距的区别,精辟啊
- Css内边距与外边距
- css内边距与外边距的区别
- css-鼠标点击去除外边虚线焦点
- CSS盒子模型之外边
- 元素h2的display属性设置成block与不设置对margin外边距的影响
- css内边距外边距和边框
- android 设置 popwindow 的焦点,点击popwindow外边的区域无效
- android 自定义Dialog怎么设置外边背景
- margin外边距
- CSS-13.css内边距,外边距属性
- width和height不包括内边距、边框或外边距
- CSS Margin(外边距)
- HTML5第六课时,margin外边距
- 通过指针修改外边实参
- 链接图片外边出现蓝框(IE8/IE9/IE10)
- margin-left:(外边距)与padding-left:(内边距)
- HTML5基础加强css样式篇(负右外边实例)(四十九)
- 区分内边距与外边距padding和margin