CODEWITHSUNDEEP
htmlcss
Tushar K. Sengar
Tushar K. Sengar

Reputation: 83

How to remove space between borders of parent and child element and collapse them

I am facing problem with the borders of div and h2. I tried everything to remove the little space at the bottom of h2 but failed. Also, I wish that the border of h2 overlap the border of 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

Upvotes: 2

Views: 1008

Answers (1)

Ahmad Dalao
Ahmad Dalao

Reputation: 2056

I noticed that problem occurs based on the zoom in or zoom out. If you zoom in the problem will disappear if you zoom out it will happen again. But anyway.

if you use the property outline instead of border for the div the problem will disappear at all screen sizes. More info about outline property

result

CSS I changed

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

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

Or you could just give the container div border of 4px if you want it that thick and remove the h2 border completely and the opposite is correct.

Upvotes: 3

Related Questions