css 如何删除父元素和子元素边框之间的空间并折叠它们

ff29svar 于 2023-01-03 发布在其他

关注(0)|答案(1)|浏览(155)

我遇到了div和h2的边界问题。我尝试了所有方法来删除h2底部的小空间，但失败了。另外，我希望h2的边界与div的边界重叠。

<!doctype html>
    <html>
      <head>
        <style>
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
          div {
            width: 80%;
            margin: 0 auto;
            margin-top: 100px;
            border: 2px solid black;
          }
          div h2 {
            border: 2px solid black;
          }
        </style>
      </head>
      <body>
        <div>
          <h2>Level 2 Heading</h2>
        </div>
      </body>
    </html>

css

来源：https://stackoverflow.com/questions/63748429/how-to-remove-space-between-borders-of-parent-and-child-element-and-collapse-the

1条答案

按热度按时间

o4tp2gmn1#

我注意到问题是基于放大或缩小而发生的。如果你放大，问题会消失，如果你缩小，它会再次发生。但无论如何。
如果您使用属性outline而不是border作为div，问题将在所有屏幕尺寸下消失。

CSS我已更改

div {
        width: 80%;
        margin: 0 auto;
        margin-top: 100px;
        outline: 2px solid black;
    }

    div h2 {
        border: 2px solid red;
        margin: 0;
    }

或者，如果您给予容器div的边界为4px，则可以完全删除h2的边界，反之亦然。

赞(0）回复(0）举报 2023-01-03

我来回答

css 如何删除父元素和子元素边框之间的空间并折叠它们

1条答案

相关问题

热门标签

最新问答