外边距+盒模型面积

外边距

语法规则同padding,不会影响盒模型面积。

同级margin之间上下叠压,左右相加。

注意俩个问题:

  1. 上下叠压现象
    产生原因:在正常使用盒模型的情况下,同级之间使用margin上下之间会产生叠压现象。最终间距取最大值。
    如题:在一个div中有两个子级div,第一个子级div向下外边距为50px,第二个子级div向上外边距为90px,问此时二者之间的像素值是多少? 90px
  2. 子债父偿现象
    产生原因:对某一标签的第一个子级使用margin或者margin-top时,如果这个子级元素是块元素,则产生子债父偿现象。
    解决方案:
  • 在父级添加overflow:hidden;
  • 在父级添加一个border
  • 不使用margin,在父级添加padding-top

盒模型面积

S=(width+padding-left+padding-right+border-left+border-right)(height+padding-top+padding-bottom+border-top+border-bottom)
S=(宽+左内边距+右内边距+左边框+右边框)
(高+上内边距+下内边距+上边框+下边框)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 1.在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例 概念:在CSS当...
    饥人谷_任磊阅读 683评论 0 3
  • relative:生成相对定位的元素,通过top,bottom,left,right的位置相对于其正常位置进行定位...
    zx9426阅读 965评论 0 2
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,038评论 1 4
  • margin合并是什么? 我们来简单看一下MDN对margin合并的解释: 块的顶部外边距和底部外边距有时被组合(...
    盛夏晚清风阅读 7,371评论 9 19