解决外边距合并的问题

最新推荐文章于 2024-11-01 16:54:21 发布

花满樱❀

最新推荐文章于 2024-11-01 16:54:21 发布

阅读量92

点赞数

文章标签： css 定位

本文链接：https://blog.csdn.net/m0_46430338/article/details/118163362

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这篇博客探讨了CSS中的父子及兄弟外边距合并现象。针对这一问题，提出了几种解决方案，包括设置父元素内边距、边框，使用overflow:hidden，以及为子元素添加浮动等。此外，还介绍了如何通过添加父元素并设置overflow:hidden或使用定位来避免兄弟元素间的外边距合并。

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .father {
        width: 200px;
        height: 200px;
        border: 1px solid #ccc;
      }
      .son {
        width: 100px;
        height: 100px;
        background-color: #ccc;
      }
      .brother {
        width: 100px;
        height: 100px;
        background-color: pink;
        margin: 100px;
      }
      .outer {
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <p>父子外边距合并</p>
    <div>解决办法</div>
    <ul>
      <li>父元素设置内边距，边框</li>
      <li>父元素设置overflow: hidden</li>
      <li>子元素设置浮动</li>
    </ul>
    <div class="father">
      <div class="son">i am son</div>
    </div>
    <p>兄弟外边距合并</p>
    <div>解决办法</div>
    <ul>
      <li>1. 给这两个兄弟元素都添加一个父元素，并且设置父元素overflow：hidden</li>
      <li>2. 给其中一个元素添加定位position:absolute</li>
    </ul>
    <!-- <div class="outer"><div class="brother1 brother">i am brother1</div></div>
    <div class="outer"><div class="brother2 brother">i am brother2</div></div> -->
    <div class="brother brother1">i am brother1</div>
    <div class="brother brother2">i am brother2</div>
  </body>
</html>