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

Question

I have and image element wrapped with a div:

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

And, It is fine until there is no image to show. When the image.jpg does not exist, I still want to preserve the layout (I will use that later in javascript), So the code will be:

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

I expect this div element does not occupy (vertical) space, But unfortunately, it does. I tried to play with line-height:

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

or

  div#main_image_wrapper{line-height:0;}

But the resultant div height will not be less than 6px.

When I use:

  img#main_image{display:block;}

this extra space will vanish. But I can not use block image in the page layout.

How can I remove this unwanted 6 px space when the img is empty?

Thank You Very Much.

http://jsfiddle.net/kasperfish/wnjsytxw/1/ I don't see 6px height in this jsfiddle. — kasper Taeymans, Feb 14 '15 at 11:31
Similar question about iframes: http://stackoverflow.com/questions/27858989/iframe-with-0-height-creates-a-gap — Salman A, Feb 14 '15 at 11:42
@kasperTaeymans I added `background:blue;` to the css, so the problem reveals itself. — Ormoz, Feb 14 '15 at 11:43
yes, I see. Just add the style `display:block;` to your image. see my answer. — kasper Taeymans, Feb 14 '15 at 12:08

score 3 · Accepted Answer · edited May 23 '17 at 11:43

Maybe you can hide images without a src:

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

Technically, an img without src attribute isn't valid though. There are ways around this, as is discussed in the question What's the valid way to include an image with no src?. But if you change that, you will also need to change the CSS, of course. :)

To solve this problem, use this valid html:

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

and by the following css, prevent occupying space:

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

@Golez Excelent solution. Thanks – Ormoz Feb 14 '15 at 11:37 — Ormoz, Feb 14 '15 at 11:37

score 1 · Answer 2 · answered Feb 14 '15 at 11:33

1

Why don't you use a different class, say noImg, for that case?

div.noImg {
  display: none;
}

Edit: I assume you are editing the div / img with Javascript, otherwise you wouldn't quite be able to edit the src attribute of the img element, right?

answered Feb 14 '15 at 11:33

evilham

346
3
12

Thanks, Yes later i edit the `src` it with javascript – Ormoz Feb 14 '15 at 11:36

score 0 · Answer 3 · answered Feb 14 '15 at 11:47

0

Try this it will help you. Just use space after image tag like   and then you can play with line height;

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

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

answered Feb 14 '15 at 11:47

Vipin Raunchhela

193
11

Thanks, It helps a bit but with line-height:0; the div still occupies a samll space. – Ormoz Feb 14 '15 at 11:52
Ok so you want 0 height div, then remove space and line height and use display:inline-block; – Vipin Raunchhela Feb 14 '15 at 12:01

score 0 · Answer 4 · answered Feb 14 '15 at 12:04

0

jsfiddle demo

css

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

html

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

answered Feb 14 '15 at 12:04

kasper Taeymans

6,950
5
32
51

Thanks, But as i mentioned earlier, `display:block` does not suit me. – Ormoz Feb 14 '15 at 12:20

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

4 Answers4