如何防止内联元素容器在内容为空时占用space？

Question

我有一个用 div:

包裹的图像元素

 <div id="main_image_wrapper">
    <img id="main_image" src="image.jpg" />
 </div>

而且，直到没有图像可以显示为止。当image.jpg不存在的时候，我还想保留布局（后面javascript会用到），所以代码为：

 <div id="main_image_wrapper">
    <img id="main_image"  />
 </div>

我希望这个 div 元素不会占据（垂直）space，但不幸的是，它确实占据了。我试着玩 line-height:

  div#main_image_wrapper{line-height:1px;}

或

  div#main_image_wrapper{line-height:0;}

但是合成的div高度不会小于6px.

当我使用：

  img#main_image{display:block;}

这个额外的 space 将会消失。但是我不能在页面布局中使用块图像。

当 img 为空时，如何删除不需要的 6 px space？

非常感谢。

Answer 1

你为什么不使用不同的 class，比如说 noImg？

div.noImg {
  display: none;
}

编辑：我假设您正在使用 Javascript 编辑 div / img，否则您将无法编辑 [=13= 的 src 属性]元素对不对？

Answer 2

也许你可以隐藏没有 src 的图像：

img:not([src]) {
   display: none;
}

从技术上讲，没有 src 属性的 img 是无效的。正如问题 What's the valid way to include an image with no src? 中所讨论的那样，有很多方法可以解决这个问题。但是如果你改变它，你当然也需要改变 CSS。 :)

要解决此问题，请使用此有效 html:

 <div id="main_image_wrapper">
    <img id="main_image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="  />
  </div>

并通过以下css，防止占用space：

 img#main_image[src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="]
             {display:none;}

Answer 3

试试这个，它会对你有所帮助。只需在图像标签后使用 space   然后你可以玩行高;

#main_image_wrapper{
    border:1px solid blue;
    lineheight:40px;
}

<div id="main_image_wrapper">
    <img id="main_image"  /> &nbsp;
 </div>

Answer 4

css

#main_image_wrapper{
    border:1px solid blue;
    background:blue;
}
img{
    display: block;
}

html

 <div id="main_image_wrapper">
    <img id="main_image"  />
 </div>

How to prevent an inline element container to occupy space when it's content is empty?