`
LiYunpeng
  • 浏览: 939875 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

子元素的margin影响到父元素的大小

    博客分类:
  • CSS
阅读更多
总体来讲,这个问题是垂直外边距合并问题。

也就是一个div,作为一个元素的第一个子集元素情况下,在设置了外边距之后,会与父级的div元素在某种情况下进行合并,那么在什么情况下呢

第一个元素的上外边距会去查找父级的border或者padding,如果没找到,就会向外找margin,如果找到margin,相邻的两个margin会进行合并,这也就是垂直外边距合并。
也就是说没有找到边界,就会一直向外查找是否需要外边距合并,除非遇到了border或者padding,则终止这个想法。
所以,在父级元素设置了border或者padding之后,就不会再继续影响父级元素的高度和位置了。
分享到:
评论

相关推荐

    css中子元素设置margin-top为什么影响了父元素

    本文介绍了css中子元素设置margin-top为什么影响了父元素,分享给大家,具体如下: <style type="text/css"> *{ margin: 0px; padding: 0px; } .show{ margin: 0px auto; width: 200px; height: ...

    父元素与子元素之间的margin-top问题(css hack)

    给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,遇到此问题的朋友可以参考下本文或许会有意想不到的收获

    浅谈css margin重叠

    给子元素添加浮动属性,相应父元素添加必要的清浮动属性; 给父元素添加边缘属性,如padding、border; 同级元素margin反向重叠 同级元素margin反向重叠时,元素之间的距离为两个margin值中较大的那个。 因解决办法...

    ChangMM#javascript-html-css-issue#CSS-第一个子元素的margin-top1

    子元素的margin-top如下html其实我们给子元素设置一个margin-top,是想他相对父层节点顶部偏移20px,但是结果是如图:子层元素没有相父元素去

    CSS的margin和padding

    margin在块元素、内联元素中的区别?什么时候该用padding而不是margin?你知道负margin吗?你知道负margin在实际工作中的用途吗?常见的浏览器下margin出现的bug有哪些?…… 写css,你少不了与margin打交道,而对于...

    float元素浮动后高度不一致导致错位的解决办方法

    1、给父元素定义font-size:0; 浮动子元素定义需要的font-size, 再定义display:inline-block;vertical-align:top; 复制代码代码如下: ul{ margin:0; padding:0; list-style-type:none; font-size:0; } ul li{ width...

    div宽度设置width:100%后再设置padding或margin超出父元素的解决办法

    不知道大家有没有遇到过这种情况,在设置了元素宽度width100%后再加上margin和padding超出父元素宽度,其实解决的方法很简单,直接使用CSS的 box-sizing 属性就可以解决这个问题,这个是CSS3新属性,可以将padding...

    margin-left和right失效(斯芬克斯)之谜

    一种情况是元素的确不支持margin-top/bottom(参看:关于margin-top/bottom在inline元素(non-Replaced)上不起作用的解释); 另一种情况则是元素产生了margin叠加(参看:如何避开麻烦的margin叠加(margin collapsing...

    解决CCS中的margin:top塌陷问题

    通常来说,margin是设置元素的外边距,正常情况下设置margin值时应该是父元素相对于浏览器定位,子元素相对于父元素定位;而现在设置了 margin-top: 50px,页面却没效果这就说明是margin塌陷。 那什么是margin塌陷呢...

    子级div设置margin影响父级.html

    前端开发中,有时候会遇到设置子级div的margin属性后,导致整个父级div整体移动,有时候却是正常的,时而正常时而异常。

    css属性width默认值width: auto与width: 100%区别详解

    子元素(包括content+padding+border+margin)撑满整个父元素的content区域。 子元素有margin、border、padding时,会减去子元素content区域相对应的width值 父元素的content = 子元素(content + padding + ...

    div标签中的元素margin-top失效的解决方法

    如题。...元素上级标签是div,已经设置了width和height等的属性,可是,在对元素使用margin进行调整的时候,无法生效。同学经验提示,对该元素的父元素属性设置成 overflow:hidden; 问题就解决了。

    Intel Rank Margin Test SOP_20181010.docx

    Memory rank margin test is a memory test scheme under normal temperature and voltage. The whole test scheme is embedded in a specific BIOS. If the Rank Margin Tool option in BIOS is enabled, the ...

    Css padding和margin区别

    这个一个CSS padding和margin的例子,对初学者很有帮助的哦~ .divcss3{border:1px solid #F00;width:400px;margin-left:15px; padding-left:35px;} .box2 { margin-left:10px; padding-left:15px; width:300px...

    你真的了解margin吗?你知道margin有什么特性吗?

    写css,你少不了与margin打交道。你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素、内联元素中的区别?...“空白区”通常是指其他元素不能出现且父元素背景可

    实现子盒子在父盒子的底部显示

    实现子盒子在父盒子的底部显示的几种方法,分为三种方法来实现。 1、绝对定位 2、flex布局 3、margin布局

    Advances in large margin classifiers

    Advances in large margin classifiers

    父元素的高度为0利用伪元素:after清除浮动可解决问题

    让页面呈现多列布局时经常会使用 float:left/right ,可是浮动布局会导致父元素的高度为0(未设置高度的情况下),不会根据子元素的高度而变化,另外,后面不需要浮动想在下一行显示的标签出现在浮动元素的后面。...

Global site tag (gtag.js) - Google Analytics