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

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

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

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

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

相关推荐

    理解margin塌陷和margin合并及其解决方案.docx

    具体而言,在上述示例中,子元素应该相对于父元素的顶部有50px的距离,但由于margin塌陷的影响,实际效果却是子元素的顶部与父元素的顶部之间的距离仅等于父元素的`margin-top`值。 **二、margin塌陷的现象解释** ...

    CSS重要属性之 margin 属性知识大整合(必看篇)

    - 父子元素的margin重叠:当父元素与其子元素相邻的边距之间没有其它内容(比如边框、内边距、非空内容或可见的后代元素)时,这两个边距会折叠。 - 元素自身的margin-bottom和margin-top相邻时也会折叠。 5. 折叠...

    父DIV自动适应子DIV高度

    5. **CSS伪类和`:nth-child()`选择器**:在某些特定场景下,可以通过CSS伪类和`:nth-child()`选择器来实现特定子元素的高度影响父元素。 在实际应用中,我们需要根据项目需求和目标浏览器范围来选择合适的方法。...

    Alignment、Margin 和 Padding 概述

    // 将子元素添加到父 StackPanel myStackPanel.Children.Add(myTextBlock); myStackPanel.Children.Add(myButton1); myStackPanel.Children.Add(myButton2); myStackPanel.Children.Add(myButton3); // 将 ...

    CSS的margin属性在页面布局中的使用攻略

    在CSS中,margin属性是可以继承的,但是子元素的margin属性值不会影响到父元素,除非父元素显式地设置了相同的margin值。另外,margin属性在不同的层叠上下文中可能会有不同的表现,因此要根据具体情况仔细调整。 ...

    正确理解CSS中的margin合并的用法

    3. **空级块元素的合并**:当一个块级元素没有任何内容,且其子元素设置了外边距时,该空元素的margin-top和margin-bottom会合并,使得元素的实际高度仅为其margin的大小。为了解决这个问题,通常需要设置一个非零的...

    去除元素之间的空格1

    特别地,如果`<a>`标签用于创建下划线菜单(`Menu是下划线的父元素`),下划线可能因为父元素的`font-size`为0而受到影响。在这种情况下,确保`<a>`标签的`text-decoration`属性设置为`underline`,同时保持适当字体...

    很少朋友知道的margin 百分比是按参照物来计算的

    需要注意的是,在使用百分比值设定margin时,如果父元素的尺寸变化(比如响应式设计中窗口大小的变化),子元素的margin也会相应地按比例变化。这种基于百分比的布局方式能够使得设计更加灵活,并且能够自适应不同...

    CSS2.1如何让块元素垂直水平居中.rar

    - 父元素`line-height: (height + padding-top + padding-bottom);` - 子元素`vertical-align: middle;` ### 未知宽高块级元素的居中方法: 1. **使用绝对定位与JavaScript**: - 使用JavaScript获取元素的宽高...

    css盒模型.docx

    padding 是盒子与内容之间的距离,用于控制父元素和子元素、元素和内容之间的位置关系。padding 有以下特点: * padding 会把盒子原有的大小撑大,如果想要保持原有大小,则需要在宽高基础上减掉。 * padding 不会...

    盒模型技术文章 .doc

    - **FirstChild Margin Bug**:当父元素的第一个子元素是块级元素,并且没有边框和浮动时,其`margin-top`可能会被错误地应用到父元素。解决方法是创建BFC,如使用`overflow:hidden`,或者为父元素或子元素添加浮动...

    div+css有实例,易学易懂

    - **子元素负边界的问题**:子元素负`margin`的影响。 - **列表的默认显示问题**:列表项的默认样式如何消除。 - **IE6中的问题**:解决IE6特有的问题。 - **IE7中的问题**:解决IE7特有的问题。 - **兼容问题实例**...

    将元素显示到屏幕正中间

    - 将`body`元素的`display`属性设置为`flex`,并设置`justify-content`和`align-items`为`center`,这样所有子元素都会沿主轴和交叉轴居中。 ```css body { display: flex; justify-content: center; align-...

    css常见的方法.docx

    当父元素不设置高度且子元素浮动时,父元素可能高度为0,这时可以用`clearfix`类或其他方式清除浮动,以便父元素能根据浮动子元素自动检测高度。 以上就是CSS中关于文字居中、选择器权重、边框样式、布局对齐等常见...

    深入解析CSS中margin属性的使用

    如果父元素没有上边距填充或者上边框,那么这个子元素的上边距可能会与父元素的上边距合并,导致父元素的上边距被子元素影响,进而影响到相邻元素的布局。 为了解决垂直外边距合并的问题,通常需要确保父元素有上边...

    水平布局1

    在网页设计和开发中,元素的布局是至关重要的,尤其是水平布局,它直接影响到页面的视觉效果和用户体验。本文将详细解析"水平布局1"这一主题,探讨元素水平方向上的布局规则及其相关属性。 首先,我们要理解元素的...

    前端面试宝典(无Vue).pdf

    Margin 塌陷是指 margin 属性的值超过了父元素的高度,导致子元素的 margin 值塌陷到父元素中。可以使用 overflow:hidden 等方法来解决 margin 塌陷问题。 less 和 Scss less 和 Scss 是两种常见的样式预处理器,...

    CSS中强大的EM,css的em属性学习全攻略.pdf

    如果我们设置一个子元素的字体大小为0.75em,那么这个子元素的字体大小就是12px(16px * 0.75)。EM单位可以是小数,如1.365em,这允许我们进行精细的尺寸控制。 在弹性布局中,使用EM单位至关重要,因为这样可以...

    CSS下盒子模型定位浅析.pdf

    子元素的外边距与父元素的内边距相加,决定了两者之间的距离。 **总结** CSS的盒子模型定位机制是网页设计中的基石。理解盒子模型的构成、类型以及margin和padding如何影响元素位置,有助于创建出层次分明、布局...

    完美实现响应式em

    因为em单位是相对的,所以在调整父元素的字体大小时,所有使用em单位的子元素也会相应缩放。 2. **盒子模型与em**: 在CSS的盒子模型中,元素的宽度、高度、内边距(padding)和外边距(margin)都可以使用em单位...

Global site tag (gtag.js) - Google Analytics