Why does my inline-block
have space below it?

Question

To keep it simple, I have a page with content that is separated into four containers. I have a class which is applied to all the div's to make them order themselves which is below. My question is why are the div's not aligning below one another? I added a simple sketch of what I am trying to do in case I did not explain this properly and a basic example of what my page looks like

<html>
<head>
</head>

<body>

    <div class="cardProp">RandomContent1</div>
    <div class="cardProp">RandomContent2</div>
    <div class="cardProp">RandomContent3</div>
    <div class="cardProp">RandomContent4</div>

</body>

div.cardProp{
    display: inline-block;
    vertical-align: top;
  }

It is an **inline**-block. They form horizontal lines, just like other inline content, like words. — Quentin, Dec 12 '16 at 22:16
That's the expected way of how textual content works. `inline-block` is similar to text. — Praveen Kumar Purushothaman, Dec 12 '16 at 22:17
fiddle example: https://jsfiddle.net/4zq8jkL7/#&togetherjs=h4na7OnpPa — Cam G, Dec 12 '16 at 22:30

score -1 · Answer 1 · answered Dec 12 '16 at 22:23

-1

I think you can do this

<div class="cardProp">
  <div class="div1">RandomContent1</div>
  <div class="div2">RandomContent2</div>
<div>
<div class="cardProp">
  <div class="div3">RandomContent3</div>
  <div class="div4">RandomContent4</div>
<div>

answered Dec 12 '16 at 22:23

Qiong

61
4

Why does my inline-block have space below it?

1 Answers1

Why does my inline-block
have space below it?