返回顶部
首页 > 资讯 > 精选 >CSS中出现外边距塌陷如何解决
  • 790
分享到

CSS中出现外边距塌陷如何解决

2023-06-08 03:06:28 790人浏览 安东尼
摘要

CSS中出现外边距塌陷如何解决?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。首先我们先看出现外边距塌陷的三种情况:当上下相邻的两个块级元素相遇,上面的元素有下边距margin-

CSS中出现外边距塌陷如何解决?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

首先我们先看出现外边距塌陷的三种情况:

当上下相邻的两个块级元素相遇,上面的元素有下边距margin-bottom,下面的元素有上边距margin-top,则它们之间的垂直距离取两个值中的较大者。

<style>  .box1 {     width: 150px;     height: 100px;     margin-bottom: 20px;     background-color: rgb(201, 239, 98);  }  .box2 {     width: 100px;     height: 100px;     background-color: rebeccapurple;     margin-top: 10px;  }</style>   <div class="box1"></div>   <div class="box2"></div>

这时候两个盒子之间的垂直距离不是30px,而是20px。

解决方法:

尽量只给一个盒子添加margin值

对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者。

<style>        .box1 {            width: 150px;            height: 100px;            margin-top: 20px;                         background-color: red;        }        .box2 {            width: 100px;            height: 100px;                        background-color: rebeccapurple;            margin-top: 10px;        }    </style></head><body>    <div class="box1">        <div class="box2"></div>    </div></body>

这时候两个盒子会发生合并,上外边距为20px。

解决办法:

①给父元素定义上边框

②给父元素定义上内边距

③给父元素添加 overflow:hidden;

④添加浮动

⑤添加绝对定位

如果存在一个空的块级元素,border、padding、inline content、height、min-height都不存在,那么上下边距中间将没有任何阻隔,上下外边距将会合并。

<p style="margin-bottom: 0px;">这个段落的和下面段落的距离将为20px</p><div style="margin-top: 20px; margin-bottom: 20px;"></div><p style="margin-top: 0px;">这个段落的和上面段落的距离将为20px</p>

可以理解成中间div宽度为0且上下边距融合,只取margin的最大值。

看完上述内容,你们掌握CSS中出现外边距塌陷如何解决的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注编程网精选频道,感谢各位的阅读!

--结束END--

本文标题: CSS中出现外边距塌陷如何解决

本文链接: https://www.lsjlt.com/news/251619.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • CSS中出现外边距塌陷如何解决
    CSS中出现外边距塌陷如何解决?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。首先我们先看出现外边距塌陷的三种情况:当上下相邻的两个块级元素相遇,上面的元素有下边距margin-...
    99+
    2023-06-08
  • CSS盒子塌陷如何解决
    本篇文章为大家展示了CSS盒子塌陷如何解决,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。一,盒子塌陷是什么?本应该在父盒子内部的元素跑到了外部。二,为什么会出现盒子塌陷? 当父元素没设置足够大小的时...
    99+
    2023-06-08
  • CSS中如何解决高度塌陷问题
    这篇文章将为大家详细讲解有关CSS中如何解决高度塌陷问题,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。HTML:<div class="first">...
    99+
    2023-06-08
  • CSS如何实现外边距
    这篇文章给大家分享的是有关CSS如何实现外边距的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 萦绕在元素边框的空缺周边是外边距。配置外边距可以在元素外树立分外的“空白”。 ...
    99+
    2024-04-02
  • 如何解决css高度塌陷问题
    这篇文章将为大家详细讲解有关如何解决css高度塌陷问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1. 高度塌陷在文档流中,父元素的高度默认被子元素撑开,也就是说子元素多高,父元素就多高。但是, 当为子...
    99+
    2023-06-08
  • 如何解决css中高度塌陷的问题
    本文将为大家详细介绍“如何解决css中高度塌陷的问题”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“如何解决css中高度塌陷的问题”能够给你意想不到的收获,请大家跟着小编的思路慢慢深入,具体内容如下,一起去收获...
    99+
    2023-06-06
  • Css中如何合并外边距
    这篇文章将为大家详细讲解有关Css中如何合并外边距,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一般发生外边距合并主要有以下三种情况:1.相邻兄弟姐妹元素两个兄弟元素之间...
    99+
    2024-04-02
  • css中内边距和外边距分别如何表示
    内边距和外边距是 css 中用于控制元素周围空白空间的属性。内边距设置元素内容与元素边框之间的空间,通过 padding 属性设置;外边距设置元素边框与相邻元素之间的空间,通过 marg...
    99+
    2024-04-28
    css
  • css如何实现外边距合并
    这篇文章主要介绍了css如何实现外边距合并,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 外边距分开(叠加)是一个相称容易的观点。然则,在...
    99+
    2024-04-02
  • 如何在css中设置外边距
    如何在css中设置外边距?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。1、使用margin属性margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。实例:...
    99+
    2023-06-15
  • css如何实现左外边距以外所有其他外边距都是auto
    这篇文章主要介绍css如何实现左外边距以外所有其他外边距都是auto,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 再来看另外一个例子。如果希望除了左外边距以外所有其他外边距都是 ...
    99+
    2024-04-02
  • margin外边距合并如何解决
    这期内容当中小编将会给大家带来有关margin外边距合并如何解决,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。一、兄弟元素的外边距合并效果图如下:(二者之间的间距为100px,不是150px)二、嵌套元素...
    99+
    2023-06-08
  • css中父元素高度塌陷怎么解决
    这篇“css中父元素高度塌陷怎么解决”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“css中...
    99+
    2024-04-02
  • 如何在CSS中防止外边距重叠
    今天就跟大家聊聊有关如何在CSS中防止外边距重叠,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。但是边界的重叠也有例外情况:水平边距永远不会重合。在规范文档中,2个或以上的块级盒模型相...
    99+
    2023-06-08
  • CSS代码如何叠加外边距
    本篇内容主要讲解“CSS代码如何叠加外边距”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS代码如何叠加外边距”吧!代码如下:<style type="text/cs...
    99+
    2023-07-04
  • 如何解决margin-top塌陷的问题
    这篇文章给大家分享的是有关如何解决margin-top塌陷的问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。什么是margin-top塌陷margin-top塌陷是在CSS的盒...
    99+
    2024-04-02
  • css上边距如何实现
    这篇文章主要为大家展示了“css上边距如何实现”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css上边距如何实现”这篇文章吧。 在c...
    99+
    2024-04-02
  • css如何使用单边外边距属性为元素单边上的外边距设置值
    这篇文章给大家分享的是有关css如何使用单边外边距属性为元素单边上的外边距设置值的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 可运用单边外边距属性为元素单边上的外边距设置装备...
    99+
    2024-04-02
  • 如何在css中为元素设置外边距
    这篇文章给大家介绍如何在css中为元素设置外边距,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。css是什么意思css是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是...
    99+
    2023-06-06
  • div外边距重合问题如何解决
    本文小编为大家详细介绍“div外边距重合问题如何解决”,内容详细,步骤清晰,细节处理妥当,希望这篇“div外边距重合问题如何解决”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。CS...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作