外边距.HTML

最新推荐文章于 2024-08-20 19:23:57 发布

@阿黎

最新推荐文章于 2024-08-20 19:23:57 发布

阅读量263

点赞数 9

文章标签： html 前端框架

本文链接：https://blog.csdn.net/2302_79957586/article/details/138511335

版权

本文探讨了CSS中外边距带来的两个问题：相邻块级元素的垂直外边距合并导致可能只保留最大值，以及嵌套块级元素的垂直外边距塌陷。提供了三种解决方法：避免给多个盒子设置外边距、为父元素添加边框或内边距，以及使用`overflow:hidden;`。

摘要由CSDN通过智能技术生成

例：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>外边距所带来的问题</title>
       <style type="text/css">
       div{
           width:400px;
           height:200px;
       }
       .box1{
           background-color:pink;
           margin-bottom: 80px;
       }
       .box2{
           background-color:skyblue;
           margin-top: 120px;
       }
       .a1{

           background-color: red;
           margin-top: 120px;
           /* border: 5px solid black;
           padding-top: 100px; */
           overflow: hidden;   /* 超出部分:隐藏 */
       }
       .a2{
           width: 200px;
           height: 50px;
           background-color: #ffc0cb;
           margin-top: 100px;
       }
       </style>
   </head>
   <body>
       <div class="box1">第一个盒子</div>
       <div class="box2">第二个盒子</div>
       <div class="a1">大盒子<div class="a2">小盒子</div></div>
   </body>
</html>

注：外边距带来的第一个问题：相邻块级元素垂直外边距合并(只会取其中最大的外边距值)
           解决方法：一般只给一个盒子设置外边距。
       外边距带来的第二个问题：嵌套块级元素垂直外边距塌陷问题
           解决方法1：给父盒子添加边框
           解决方法2：给父盒子添加内边距
           解决方法3：给父盒子添加overflow:hidden;>开发中常用的

@阿黎

关注

9
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
外边距.HTML

小盒子</div></div>解决方法3：给父盒子添加overflow:hidden;注：外边距带来的第一个问题：相邻块级元素垂直外边距合并(只会取其中最大的外边距值)<div class="box1">第一个盒子</div><div class="box2">第二个盒子外边距所带来的问题
复制链接

扫一扫