How can I get rid of that white space at the bottom between the container and the child elements-CodePudding

<!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>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div >
      <div > <p>This is box one</p> </div
      ><div >
        <p>This is box two</p>
      </div>
    </div>
  </body>
</html>

The CSS code

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
}
.parent {
  border: 5px solid black;
}

.child {
  border: 5px solid red;
  display: inline-block;
  width: 50%;
}

I tried every thing from setting margins of the two child elements to 0, the padding of the parent element to 0....nothing seems to work please check the given photothis photo shows what I get from this code

CodePudding user response：

The margin is coming from the <p> elements.

Try using the DevTools on your browser of choice. Inspect the elements in the block you suspect is giving you the issue, that way you can self-diagnose.

p {
  margin: 0;
}

CodePudding user response：

If I understand your problem correctly, then you need to set the property for .child

.child {
  vertical-align: top;
}

CodePudding user response：

I suspect this white line is a problem in the rendering in your browser. I just tried it in JSFiddle using a Brave Browser and a Safari.

In Brave (similar to Chrome), when I change the zoom on the page the white line appears or disappears, depending on how much zoom. When I tried it in Safari, this did not happen, the white line never appeared between the elements.

I would say for you to try doing this test in different browsers because the styles seem to not be responsible for this issue.

CodePudding user response：

When You do CSS reset, set margin and padding to 0 for all properties

* {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

And then if the problem still occurs, inspect elements on your browser.