6

I have the following problem: I am creating an inline-block element (.content) within a wrapper-div (.wrapper). If there is content in the .content-div, everything works just fine. But if I remove the content from the .content-div, a space gets added below the inline-block-div.

I am not sure why this happens and how to fix it correctly. Note that after manually removing all spaces and line-breaks in my code the problem persists, but setting the font-size to 0 helps.

Also, setting vertical-align: top to the .content-div helps. I am not sure why exactly.

Whats the best way of fixing it? Why does this happen?

Fiddle: https://jsfiddle.net/cjqvcvL3/1/

<p>Works fine:</p>

<div class="wrapper">
  <div class="content">not empty</div>
</div>

<p>Not so much:</p>

<div class="wrapper">
  <div class="content"></div>
</div>

.wrapper {
  background-color: red;
  margin-bottom: 20px;
 /* font-size: 0; *//* this would fix it, but why? (problem persists after manually removing all spaces and breaks) */
}

.content {
  display: inline-block;
  height: 20px;
  width: 200px;
  background-color: green;
  /* vertical-align: top; *//* this would fix it, but why? */
}

Update

I have put together a new fiddle. This should better illustrate my problem. How do I get rid of the green line below the textarea?

https://jsfiddle.net/cjqvcvL3/7/

<div class="content"><textarea>Some&#13;&#10;Content</textarea></div>

.content {
  display: inline-block;
  background-color: green;
}
user2482138
  • 120
  • 1
  • 10

3 Answers3

3

This happens because you specifically give width and height to the .content. Have you considered using the :empty pseudo selector?

.content:empty {
  display: none;
}

https://jsfiddle.net/cjqvcvL3/5/

Jonas Grumann
  • 10,438
  • 2
  • 22
  • 40
  • The other answers are valid as well, I guess now it's just a matter of preference. I decided to go with the :empty selector because it just makes sense when you read it in your css: you see it and you immediately know what it does and why it's there. It might save you some time when you will re-read your code in the future. – Jonas Grumann Feb 19 '16 at 14:52
  • Thank you. I have updated my question to better illustrate my problem. Your answer is perfectly valid to the original questions problem. – user2482138 Feb 19 '16 at 14:55
  • Oh ok, then I think the font-size: 0; solution should work, right? – Jonas Grumann Feb 19 '16 at 15:16
  • I think I will go wit hthe font-size: 0 solution. But I am not sure why it works or why the problem happens in the first place. – user2482138 Feb 19 '16 at 15:24
0

Setting your the content display to block instead of inline-block fixes the problem.

.content {
  display: block;
  height: 20px;
  width: 200px;
  background-color: green;
  /* vertical-align: top; *//* this fixes it  */
}

This explains why setting vertical-align to top fixes the problem as well:

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.

Tim Troiano
  • 449
  • 1
  • 7
  • 25
  • Thank you. I have updated my question to better illustrate my problem. Your answer is perfectly valid to the original questions problem. – user2482138 Feb 19 '16 at 14:56
0

Here is a working example: jsfiddle

To remove the gap, you have to surround the content div with a wrapper with font-size:0. The reason is exained here: answer

inline-block

This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

inline

This value causes an element to generate one or more inline boxes.

The most important part for this topic would be that the element itself get's formatted not just the content. Every inline-block element will be seen as atomic inline box and thus take up space.

.wrapper2 {
 background-color: red;
  margin-bottom: 20px;
  font-size:0;

}
Community
  • 1
  • 1
silviagreen
  • 1,679
  • 1
  • 18
  • 39
  • Thank you. I have updated my question to better illustrate my problem. Your answer is perfectly valid to the original questions problem. – user2482138 Feb 19 '16 at 14:56