首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

同级元素的CSS页边距上边距不是父元素

的情况可能是由于以下原因:

  1. 相邻元素的margin重叠:当相邻元素的margin值相加超过了较大的margin值时,较小的margin值将被忽略,导致上边距不是父元素的边距。这种情况下,可以通过设置边框、内边距或使用浮动等方式来解决。
  2. 父元素设置了overflow属性:当父元素设置了overflow属性为非默认值(如hidden、auto等),并且子元素的margin超出了父元素的边界时,子元素的上边距可能不会被父元素的边距所包含。解决方法是调整父元素的overflow属性或使用其他布局方式。
  3. 父元素设置了padding属性:如果父元素设置了padding属性,子元素的margin可能会被父元素的padding所包含,导致上边距不是父元素的边距。可以通过调整父元素的padding值或使用负margin来解决。
  4. 父元素设置了position属性:当父元素设置了position属性为非static值(如relative、absolute等),并且子元素的margin超出了父元素的边界时,子元素的上边距可能不会被父元素的边距所包含。可以通过调整父元素的position属性或使用其他布局方式来解决。

总结起来,同级元素的CSS页边距上边距不是父元素的问题可能是由于相邻元素的margin重叠、父元素设置了overflow属性、父元素设置了padding属性或父元素设置了position属性等原因导致的。解决方法可以根据具体情况进行调整,如调整margin值、overflow属性、padding值或position属性,或使用其他布局方式来解决。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【CSS】盒子模型外边距 ④ ( 元素默认的外边距 | 清除元素默认的内外边距 | 行内元素边距设置 )

文章目录 一、元素默认的外边距 1、body 标签的默认外边距 2、p 标签的默认外边距 二、清除元素默认的内外边距 1、清除方式 2、代码示例 三、行内元素边距设置 一、元素默认的外边距 ---...- 1、body 标签的默认外边距 向 HTML 的 标签中 , 添加元素 , 并 不是紧贴 左侧 和 顶部 , 而是有一个 默认的间距 , 如下图所示 : 按 F12 键 , 进入 调试模式.../p> 显示效果如下 : 按 F12 键 , 进入调试模式 , 发现 p 标签元素 上下 都有 橙色的 外边距 , 右侧 红色矩形框 中 , 上边距 和 下边距 都是 1em...padding: 0; margin: 0; } 样式 ; 查看 p 标签样式 , 其 上下边距 也消失了 ; 三、行内元素边距设置 ---- 为 行内元素 设置 上下边距 是无效的 , 建议只为...四个方向的边距 , 仅左右边距生效 */ margin: 50px; } 行内元素

2.5K10

webkit中BFC元素临近浮动元素时的边距bug

一直以来我们都很熟悉IE的“浮动边距加倍”的bug,并且绝大多数重构人员都已经很擅长在需要浮动时就直接绕过他。...这个BFC元素没有指定宽度值(或者指定width:auto) 当满足触发条件时,该BFC元素的另一侧的边距将不再受css控制(在webkit核心浏览器下),而是由你所指定的与浮动元素相同的边距决定,即使你在...css中明确指定另一侧的边距为0或任意值也没用。...具体来说,可以分为两种情况: 当BFC与浮动方向相同的边距小于或等于浮动元素占据的总宽度(width+margin+padding+border)时,BFC另一侧的边距等于所设定方向上的边距(下图前两种情况...); 当BFC与浮动方向相同的边距大于浮动元素占据的总宽度时,BFC另一侧的边距等于浮动元素占据的总宽度(下图第三种情况)。

1.7K50
  • 【CSS】使用绝对定位 浮动解决外边距塌陷问题 ( 为父容器 子元素设置内边距 边框 | 为子元素设置浮动 | 为子元素设置绝对定位 )

    一、外边距塌陷描述 ---- 在 标准流的父盒子 中 , 添加一个 标准流子盒子 ; 如果 子盒子设置 100 像素的外边距 , 父盒子也会被带下来 , 这就是外边距塌陷 ; 下面的示例 1 中 ,...父盒子 和 子盒子 没有添加任何外边距 , 没有塌陷 ; 示例 2 中 , 为子盒子设置了 上外边距 , 结果将 父盒子也带下来了 ; 1、没有塌陷的情况 代码示例 : 的上外边距 , 出现了外边距塌陷的情况 ; /* 子盒子添加上外边距 出现塌陷情况 */ margin-top: 100px; 代码示例 : 父容器 / 子元素设置内边距 / 边框 ---- 这里使用传统方法 : 为 父容器 / 子元素 设置 内边距 / 边框 ; 下面是 为父容器设置 1 像素的 内边距 ; .father {...{ width: 400px; height: 400px; background-color: pink; /* 为父容器 / 子元素设置内边距 / 边框 */ /*

    1.3K20

    一道面试题来看伪元素、包含块和高度坍塌

    边距塌陷(Collapsing margins) 在CSS中,两个或多个框(可能是也可能不是兄弟)的相邻边距可以合并形成一个边距,称为边距塌陷。...不会发生边距坍塌的情况 根节点元素 水平边距(Horizontal margins)不会崩溃 「如果具有间隙的元素的顶部和底部相邻,他会与后续同级的元素边距一起坍塌,但是不会与父元素底部的一起坍塌(If...盒子的上边距和第一个流入子元素的上边距 盒子的下边距和同级后一个流入元素的上边距 如果父元素高度为“auto”,最后一个流入子元素的底部距和其父元素的底部距 某个元素没有建立新的 BFC,并且 min-height...「如果'min-height'属性为零,并且框没有顶部或底部边框,也没有顶部或底部填充,并且框的'height'为0或'auto',并且框不包含边距,则框自身的边距会折叠 行框,其所有流入子页边距(如果有的话...,当边距全为正数的时候,结果页边距宽度是边距塌陷宽度的最大值。

    1.1K20

    【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度外边距其他元素所占空间的影响

    (一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再细说) 2.width:auto也是以“占满参考元素宽度”为目标。...说白了width:auto试图达成这一等式:子元素的width+padding(左和右)+margin(左和右) = 参考元素的的width(参考元素一般为父元素) 【举个例子】: <style type...width:auto; padding:0px 10px;//设置左右内边距为10px margin:0px 10px;//设置左右外边距为10px height...看下面:  若存在被定位的上层元素,则以距离最近的相对定位的元素宽度为基准: 我们给inner-100percent加上一个相对定位的父级元素: ..."div4"这个文本不是被包裹在div4这个元素里面吗,为什么被浮动元素div2“怼”下来了?刚刚不是还说好浮动 ==脱离文档流 == 不占其他元素的物理空间的吗?对啊,这里说的是元素,并不是文本。

    2.1K110

    译|CSS中的间距,前端开发中各种设置间距的优点缺点及实例

    此外,CSS Tricks还在页边距底部和页边距顶部之间进行了投票。61%的开发者更喜欢 margin-bottom 而不是 margin-top。...另一个与边距折叠相关的例子是子节点和父节点。...关于解决方案2,它没有CSS特异性问题。但是,它只能处理一个列栈。 更好的解决方案是通过向父元素添加负边距来取消不需要的间距。....wrapper { margin-bottom: -16px; } 它用一个等于底部间距的值将元素推到底部。注意不要超过边距值,因为它会与同级元素重叠。...结果表明,基于 writing-mode 的页边距工作得非常好。 我认为这些用例就足够了。让我们继续一些有趣的概念! 组件封装 大型设计系统包含许多组件。向其直接添加边距是否合乎逻辑?

    12.1K10

    vue项目如何实现返回上一页

    但是由于 Vue 应用是单页应用,浏览器的访问历史未必和 Vue 的浏览历史相同。 还有一点,就是使用 router 跳转的时候,Vue 不会重新加载 CSS 。...比如从 A 页面跳到 B 页面,会沿用 A 页面中的 CSS 样式,我在 A 页面中设置了 .content 的上边距是 20px ,B 页面没有设置边距,但如果从 A 页面跳到 B 页面,B 页面中的....content 也会带有 20px 的上边距。...Vue的 style 中使用 scope 属性,浏览器渲染后,会给每个组件中的元素增加自定义属性,浏览器渲染样式时会变成 data-v-xxx 这也是 scoped 的工作原理,所以在子组件中写的元素...,只有子组件中的自定义属性,而父组件中加的样式,最终浏览器渲染时是找不到对应的元素的,(因为父组件中样式给出的自定义属性是不一致的),所以子组件中的样式没办法在父组件中修改。

    9.1K10

    《精通CSS》第3章 可见格式化模型

    最后,内边距、边框和外边框可以应用于元素的四边,也可以单独用于某一边。外边距甚至可以使用负值,从而使得元素在页面中移动。...外边距的折叠有以下几种情况(很重要!)。 当两个元素垂直堆叠时,上方元素的下边距会与下方元素的上边距发生折叠。...3.2 可见格式化模型 3.2.1 包含块与定位 常规情况下,包含块是元素的最近块级父元素,但这并不是一定的。...浮动折行 浮动元素在浮动时不仅会受到同级浮动元素的影响,还会受非同级元素的影响。如下图所示,第二组浮动盒子会受到第一组盒子的影响。 ?...清除浮动时,浏览器会在这个元素的上方添加足够的外边距,从而将元素的上边缘垂直向下推移到浮动元素下方。如下图所示。

    1.3K20

    【CSS】CSS 总结 ⑤ ( CSS 盒子边框 | CSS 盒子模型内边距 | CSS 盒子模型外边距 | CSS 盒子模型圆角边框 | CSS 盒子模型阴影 ) ★

    没指定 具体的尺寸 , 为该元素设置 Padding 内边距 , 则不会撑开盒子 ; 如果 标签元素 指定了 具体的尺寸 , 为其设置 Padding 内边距 , 会撑开盒子 ; 三、CSS 盒子模型外边距...和 右外边距 必须 设置为 auto 值 ; 如果没有设置宽度 , 块级盒子自动充满父容器 , 因此 如果要设置水平居中, 必须设置宽度 ; auto 的含义是 指定的 边距方向 自动充满 ; /*...向 HTML 的 标签中 , 添加元素 , 并 不是紧贴 左侧 和 顶部 , 而是有一个 默认的间距 ; 标签 默认设置了 8 像素的外边距 , 对应的调试模式中 橙色的 部分...不会合并 ; 8、嵌套模型盒子 外边距塌陷 嵌套 的 模型盒子 中 , 如果出现下面的情况 : 父元素 没有 内边距 和 边框 父元素 和 子元素 都设置了 上外边距 , 则会出现 父元素 上外边距 与...子元素 上外边距 合并的情况 , 合并后的 上外边距为 二者之间 较大的值 ; 推荐解决方案 : 为 父元素 设置 边框 或 内边距 , 不要让 两个外边距 互相接触 ; 为 父元素 添加 overflow

    39510

    CSS 盒子模型(一)

    CSS 盒子模型本质上是一个盒子,封装周围的 HTML 元素,它包括:边框、外边距、内边距、和 实际内容。...那我们可不可以让它相邻的两条边共用同一条边呢 ? 当然可以,让它合并就好。 border-collapse: 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。...相邻块元素垂直外边距的合并 当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距 margin-bottom,下面的元素有 上外边距 margin-top ,则他们之间的垂直间距不是...解决方案: 尽量只给一个盒子添加 margin 值 2.嵌套块元素垂直外边距的塌陷 对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。...解决方案: 可以为父元素定义上边框。 可以为父元素定义上内边距。 可以为父元素添加 overflow:hidden。

    18110

    【CSS】CSS 总结 ⑦ ( 定位 | 静态定位 | 相对定位 | 绝对定位 | 子绝父相 | 固定定位 | 使用绝对定位设置水平垂直居中 | 堆叠顺序 | 显示模式 | 元素隐藏 ) ★

    | 代码示例 ) 【CSS】使用绝对定位 / 浮动解决外边距塌陷问题 ( 为父容器 / 子元素设置内边距 / 边框 | 为子元素设置浮动 | 为子元素设置绝对定位 ) 【CSS】元素显示与隐藏 ( display...; 2、CSS 定位简介 定位是将 盒子模型 定位到某个位置 , 并且自由地漂浮在其它盒子上方 ; 定位由 定位模式 + 边偏移 构成 ; 3、边偏移 边偏移 : 顶部偏移量 : 盒子模型 距离 父容器...上边线 的长度 , 如 : top: 10px ; 底部偏移量 : 盒子模型 距离 父容器 下边线 的长度 , 如 : bottom: 10px ; 左侧偏移量 : 盒子模型 距离 父容器 左边线 的长度...子容器也会相对于 父容器 进行定位 ; 7、绝对定位特点 绝对定位 以 带有定位的 父级元素 为基准 , 通过 边偏移 移动位置 ; 如果 绝对定位 的元素 的 父级元素 没有定位 , 那么会 一直向上查找有定位的父级元素...使用标尺测量父容器的宽高 , 通过设置四个边的边偏移量 , 设置元素 水平 / 垂直 居中 ; 2、先偏移50%再回退固定值 父容器 盒子 如果尺寸发生了改变 , 使用上述固定边偏移的方式设置的居中就会出现问题

    35910

    大型编程电视剧连载 | CSS知识点硬核整理归纳(二)

    5.4.5.1、相邻块元素垂直外边距的合并 当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom...为了解决这个问题,大概有以下几个方案: 可以为父元素定义上边框。 可以为父元素定义上内边距。 可以为父元素添加overflow:hidden。...7.2、边偏移 简单说, 我们定位的盒子,是通过边偏移来移动位置的。 在 CSS 中,通过 top、bottom、left 和 right 属性定义元素的边偏移:(方位名词)。...边偏移属性 示例 描述 top top: 80px 顶端偏移量,定义元素相对于其父元素上边线的距离。 bottom bottom: 80px 底部偏移量,定义元素相对于其父元素下边线的距离。...浏览器可视窗口 + 边偏移属性 来设置元素的位置; 跟父元素没有任何关系;单独使用的 不随滚动条滚动。

    1.8K20

    【前端网页】CSS样式表进阶之盒子模型

    内外边距简化设置方式 6. 单元素-水平居中 7. 相邻元素-外边距合并 8. 父子元素-外边距塌陷 1. 什么是盒子模型 所有的 HTML 元素,我们都可以看成一个四边形,即一个盒子。...用 CSS 来设置元素盒子的 内边距、边框 和 外边距 的样式的方式, 相当于设置盒子的样式,所以我们将其称之为 盒子模型 2. ...内边距:padding 内边距:HTML 元素里的内容体 到 HTML 元素边框 的距离 内边距有四个属性可以设置: padding-top: 上边距 padding-right: 右边距...外边距:margin 外边距:HTML 元素边框 到 其他 HTML 元素边框的距离 外边距有四个属性可以设置: margin-top: 上边距 margin -right: 右边距...左右外边距 一般不会合并 8. 父子元素-外边距塌陷 外边距塌陷:特指父子元素,因父元素无边框,父元素的外边距会塌陷到子元素中。导致子元素设 置外边 距,父元素会被级联作用。

    65130

    前端面试题中的“盒模型”是什么?

    css 盒模型(Box Model),在html中任何一个元素都可以看作盒子,这里说的盒子与现实不太一样,css中盒子是二维的,盒子由内到外分四个部分:margin(外边距)、border(边框)、padding...css通过margin、border、padding三个属性来控制盒子,content是html元素的内容。...margin-top:上边距 margin-right:右边距 margin-bottom:下边距 margin-left:左边距 代码示例1: /*margin属性后只跟1个值,同时设置四条边的边距相等...:20px; margin-bottom:30px; margin-left:40px; padding:表示盒子内边距,与外边距不同,padding不是只能完全透明,可以设置背景颜色和图片。...border-box:设置的width、height包含了边框和内边距,真正的元素高度需要减去边框和内边距才能得到。 inherit:继承父级的box-sizing属性值。

    47920

    JavaScript DOM元素尺寸和位置

    总结:以上的三种CSS获取元素大小的方法,只能获取元素的CSS大小,却无法获取元素本身实际的大小。比如加上了内边距、滚动条、边框之类的。...,为184; 4.增加内边距,最终值等于原本大小加上内边距的大小,为220; PS:如果说没有设置任何CSS的宽和高度,那么非IE浏览器会算上滚动条和内边距的计算后的大小,而IE浏览器则返回0。...PS:对于元素的实际大小,offsetWidth和offsetHeight理解如下: 1.增加边框,最终值会等于原本大小加上边框大小,为220; 2.增加内边距,最终值会等于原本大小加上内边距大小,为220...如果四条边宽度不同的话,可以直接通过计算后的样式获取,或者采用以上三组获取元素大小的减法求得。 2.offsetLeft和offsetTop 这组属性可以获取当前元素相对于父元素的位置。...PS:加上边框和内边距不会影响它的位置,但加上外边据会累加。

    2.8K70

    前端面试题中的“盒模型”是什么?

    css 盒模型(Box Model),在html中任何一个元素都可以看作盒子,这里说的盒子与现实不太一样,css中盒子是二维的,盒子由内到外分四个部分:margin(外边距)、border(边框)、padding...css通过margin、border、padding三个属性来控制盒子,content是html元素的内容。...margin-top:上边距 margin-right:右边距 margin-bottom:下边距 margin-left:左边距 代码示例1: /*margin属性后只跟1个值,同时设置四条边的边距相等...:20px; margin-bottom:30px; margin-left:40px; padding:表示盒子内边距,与外边距不同,padding不是只能完全透明,可以设置背景颜色和图片。...border-box:设置的width、height包含了边框和内边距,真正的元素高度需要减去边框和内边距才能得到。 inherit:继承父级的box-sizing属性值。

    32140

    你是否彻底了解margin属性?

    …… Margin是什么 CSS 边距属性定义元素周围的空间。通过使用单独的属性,可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。...这个问题发生的原因是根据规范,一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。...再说了白点就是:父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素,祖先元素)的麻烦。...为了“弥补修复”这个父子垂直外边距合并这个CSS规范“Bug”,而强制在父元素上使用border-top和padding-top,不舒服,也不容易记住,下次再发生这样的情况还是会忘记这条准则,而且在页面设计稿里如果不需要...原理分析:块级对象默认的display属性值是block,当设置了浮动的同时,还设置了它的外边距就会出现这种情况。也许你会问:“为什么之后的对象和第一个对象之间就不存在双倍边距的Bug”?

    88620

    CSS基础知识巩固你的前端基础

    子元素选择器是相对于父元素的第一级子元素符合条件。 相邻兄弟选择器,针对的元素是同级元素,拥有相同的父元素,且两个元素是相邻的。...:visited 向已被访问的链接添加样式 :first-child 向元素添加样式,且该元素是它的父元素的第一个子元素 :lang 向带有指定lang属性的元素添加样式 伪元素选择器 css中常用的伪元素如下表所示...css内边距属性,元素的内边距在边框和内容之间。...css内边距的属性: 属性 说明 padding-top 元素的上内边距 padding-right 元素的右内边距 padding-bottom 元素的下内边距 padding-left 元素的左内边距...定义元素的下外边距 margin-left 定义元素的左外边距 margin 用一个声明定义所有外边距属性 css边框的属性: 属性 说明 border-top-style 上边框的样式属性 border-right-style

    2K10
    领券