Как удалить пробел между границами родительского и дочернего элементов и свернуть их

#html #css

#HTML #css

Вопрос:

Я столкнулся с проблемой с границами 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>

введите описание изображения здесь

Ответ №1:

Я заметил, что проблема возникает в зависимости от увеличения или уменьшения масштаба. Если вы увеличите масштаб, проблема исчезнет, если вы уменьшите масштаб, это произойдет снова. Но в любом случае.

если вы используете свойство outline вместо border для div , проблема исчезнет при всех размерах экрана. Дополнительная информация о свойстве outline

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 границу, и правильно обратное.