CODEWITHSUNDEEP
htmlcss
user2482138
user2482138

Reputation: 120

How to remove space below empty inline-block div (and why is it there anyway?)

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;
}

Upvotes: 6

Views: 1312

Answers (3)

silviagreen
silviagreen

Reputation: 1729

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;

}

Upvotes: 0

Tim Troiano
Tim Troiano

Reputation: 447

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.

Upvotes: -1

Jonas Grumann
Jonas Grumann

Reputation: 10786

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/

Upvotes: 3

Related Questions