首页
学习
活动
专区
工具
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.4K10

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、没有塌陷情况 代码示例 : <!...在子盒子中设置了 100 像素上外边 , 出现了外边塌陷情况 ; /* 子盒子添加上外边 出现塌陷情况 */ 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 工作得非常好。 我认为这些用例就足够了。让我们继续一些有趣概念! 组件封装 大型设计系统包含许多组件。向其直接添加是否合乎逻辑?

    12K10

    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 工作原理,所以在子组件中写元素...,只有子组件中自定义属性,而组件中加样式,最终浏览器渲染时是找不到对应元素,(因为组件中样式给出自定义属性是不一致),所以子组件中样式没办法在组件中修改。

    9K10

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

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

    1.3K20

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

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

    32710

    CSS 盒子模型(一)

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

    17210

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

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

    14910

    大型编程电视剧连载 | 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. 父子元素-外边塌陷 外边塌陷:特指父子元素,因元素无边框,元素外边会塌陷到子元素中。导致子元素设 置外边 元素会被级联作用。

    64430

    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属性值。

    31140

    你是否彻底了解margin属性?

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

    86220

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

    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属性值。

    47320

    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
    领券