html – 如何删除空内联块div下面的空格(为什么它仍然存在？)

2023年10月15日 248次阅读

我有以下问题：我在wrapper-div(.wrapper)中创建一个内联块元素(.content).如果.content-div中有内容,一切正常.但是如果我从.content-div中删除内容,则会在inline-block-div下面添加一个空格.

我不确定为什么会发生这种情况以及如何正确解决问题.请注意,在我的代码中手动删除所有空格和换行符后,问题仍然存在,但将font-size设置为0会有所帮助.

另外,将vertical-align：top设置为.content-div会有所帮助.我不确定为什么.

什么是修复它的最佳方法？为什么会这样？

小提琴：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? */
}

更新

我把一个新的小提琴放在一起.这应该更好地说明我的问题.如何摆脱textarea下方的绿线？

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

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

.content {
  display: inline-block;
  background-color: green;
}

最佳答案 发生这种情况是因为您特意为.content提供宽度和高度.

您是否考虑过使用：empty伪选择器？

.content:empty {
  display: none;
}

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

点赞