盒子模型内边距、外边距、嵌套块元素塌陷三种解决方案

最新推荐文章于 2024-02-21 09:23:18 发布

小馒头爱学Java

最新推荐文章于 2024-02-21 09:23:18 发布

阅读量524

点赞数

分类专栏：前端文章标签： css3 前端 css

本文链接：https://blog.csdn.net/qq_45769329/article/details/121013472

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了CSS中的内边距（padding）和外边距（margin）属性，特别是如何使用margin实现块级元素的水平居中。此外，还详细讨论了嵌套块元素垂直外边距塌陷的问题，并提供了三种解决方案，包括设置透明边框、内边距和overflow:hidden。这些技巧对于优化网页布局至关重要。

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

一、内边距

1.padding属性

2.padding属性的简写

二、外边距

1.margin属性

2.应用—让块级盒子水平居中对齐

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中需要给其父元素添加text-algin:center 即可
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .header {
      width: 900px;
      height: 200px;
      background-color: pink;
      margin: 0 auto;
      text-align: center; /* 行内元素或者行内块元素水平居中 */
    }
  </style>
</head>
<body>
<div class="header">
  <span>里面的文字</span>
</div>
</body>
</html>

三、嵌套块元素垂直外边距的塌陷

1.对于两个嵌套关系（父子关系）的块元素，父元素有上外边距的同时，子元素也有上外边距，此时父元素会塌陷较大的外边距值

同时我希望子元素离父元素上边距是100px，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
   .father {
       width: 400px;
       height: 400px;
       background-color: blue;
       margin-top: 50px;
   }
   .son {
       width: 200px;
       height: 200px;
       background-color: pink;
       margin-top: 100px; /* *** */
   }
  </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>
but结果却是这样子

解决办法：

（1）可以为父元素定义上边框

（2）可以为父元素定义上内边距

（3）可以为父元素添加overflow: hidden
第一种 
<style>
.father {
       width: 400px;
       height: 400px;
       background-color: blue;
       margin-top: 50px;
       border: 1px solid transparent; /* transparent 透明的 */
   }
</style>

第二种
<style>
 .father {
       width: 400px;
       height: 400px;
       background-color: blue;
       margin-top: 50px;
       padding: 1px;
   }
</style>

第三种
<style>
 .father {
       width: 400px;
       height: 400px;
       background-color: blue;
       margin-top: 50px;
       overflow: hidden;
   }
</style>