Question

我遇到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>

enter image description here

Answer 1

我注意到基于放大或缩小会出现问题。如果放大，缩小问题将消失，再次发生。但是无论如何。

如果您使用属性outline代替border的属性div，则问题将在所有屏幕尺寸下均消失。有关outline property

的更多信息

我更改了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边框，相反是正确的。

如何删除父元素和子元素边界之间的空间并将其折叠

1 个答案: