CSS3 Inline-block divs have white at top of page

Question

I've been reading other questions but nothing seems to fix my issue.

I'm trying to create two columns that take up 50% of the screen. I've done this but there's a gap at the top which I can't fix for some reason - what am I doing wrong?

problem

Here's my code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Test column</title>

    <link rel="stylesheet" href="main.css">
  </head>

  <body>
    <div class="container"><div class="col-left">
        hello
      </div><div class="col-right">
        hello
      </div></div>
  </body>
</html>

My CSS:

html, body {
  padding: 0;
  height: 0;
}


.col-left {
  display: inline-block;
  width: 50%;
  background: #1DA1F2;
  height: 100vh;
}

.col-right {
  display: inline-block;
  width: 50%;
  height: 100vh;
}

Add `margin: 0` to your `html, body` rule – j08691 Oct 30 '18 at 20:49 — j08691, Oct 30 '18 at 20:49
Thank you, I am an idiot I forgot to add this in – apark Oct 30 '18 at 20:52 — apark, Oct 30 '18 at 20:52

score 0 · Answer 1 · answered Oct 30 '18 at 20:50

0

That is a margin

html, body {
  padding: 0;
  height: 0;
  margin: 0;
}

answered Oct 30 '18 at 20:50

Adrian Brand

20,384
4
39
60

why `height:0` ? – Temani Afif Oct 30 '18 at 20:59
I didn't even notice the height, I just copied OP's CSS and added a margin. – Adrian Brand Oct 30 '18 at 21:37

CSS3 Inline-block divs have white at top of page

1 Answers1