This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 3 years ago.
When I change my website to
<!DOCTYPE HTML>
Every img element that is wrapped inside a DIV has a 3px bottom margin to it even though that margin is not defined in CSS. In other words, there are no style attributes that are causing that 3px bottom margin.
<div class="placeholder">
<img alt="" src="/haha.jpg" />
</div>
Now let's say haha.jpg is 50x50, and .placeholder is set to display: table. Strangely the height dimensions of .placeholder in my observation is 50x53...
Has anyone encountered this anomaly before and fixed it?
EDIT
Here is the JS FIDDLE
http://jsfiddle.net/fRpK6/
This problem is caused by the image behaving like a character of text (and so leaving a space below it where the hanging part of a "y" or "g" would go), and is solved by using the vertical-align CSS property to indicate that no such space is needed. Almost any value of vertical-align will do; I'm fond of middle, personally.
img {
vertical-align: middle;
}
jsFiddle: http://jsfiddle.net/fRpK6/1/
I often solve this by giving the image element display:block or display:inline-block as appropriate.
it is solved my problem.
line-height: 0;
I believe setting
line-height: 1;
on the image will also fix this problem, especially if it's in a block by itself.
apply display: block to the image fix it, i have this issue with images inside floated divs.
For me it was a combination of
font-size: 0px;
line-height: 0;
on the wrapping container that fixed it.
I'm not sure of the exact explanation of why it happens, but give your placeholder div font-size: 0px;
.placeholder {
font-size: 0px;
}
maybe it is the problem of the white-space that causes this.
so, the methods bellow maybe useful
img {
display: block;
}
or
img {
vertical-align: top/middle/...;
}
or
.placeholder {
font-size: 0;
}
In my special case none of the above solutions worked.
I had a wrapping div with display: flex;.
I managed to make this working by adding: align-items: flex-start; to the wrapping div AND to all the images: display: block;.
Before I explicitly told the content to align it messed up the Layout. After setting it to flex-start everything works like a charm.
not sure what's the exact problem but i have try this with 2 different option first apply class on img tag this will work and second apply font size 0 px;
http://jsfiddle.net/fRpK6/3/
It also happens with piled up divs, just add float property.
Example:
<body>
<div class="piledUpDiv">Some text</div>
<div class="piledUpDiv">Some text</div>
<div class="piledUpDiv">Some text</div>
</body>
Problematic CSS:
.piledUpDiv{
width:100%;
display:inline-block;
}
Solution:
.piledUpDiv{
width:100%;
display:inline-block;
float:left;
}
Related
jsfiddle
I have:
HTML:
<div>
<img src='http://upload.wikimedia.org/wikipedia/commons/7/70/Peace_dove_icon.svg' width='50' height='50'>
</div>
CSS:
div{
display:inline-block;
position: relative;
margin: 0;
border: 0;
padding: 0;
overflow: visible;
}
but if you inspect the page you should hopefully see a seemingly arbitrary 5px extra on the bottom of the div tag.
how can I get rid of this?
It's the descender of the img. Images behave like words and sit on the baseline in the container, which leaves space below them for descenders.
Solution: give the img display:block or use properties like vertical-align, position or float, whichever suits the situation best.
I updated the fiddle - new one here - but I must say, there is no visible difference in this case. There is nothing on the screen except the image.
You can use the vertical-align as by default, images are rendered inline, like a letter.
or set the style="display: block;"
Just give the div this css rule:
height: 50px;
Here is a working fiddle:
http://jsfiddle.net/Hive7/9JU3T/1/
line-height:0; for the div solves the problem, too!
I used two divs...
One for displaying images....
One for displaying text...
With the first div, I set background-image property for setting background-image...
And of course set the display property as an inline...
But the thing is they are on the same line, but not exactly the same line...
<div class="div_with_image"></div>
<div style="display:inline">Text</div>
this is css file
.div_with_image{
background-image: url(../beacon/images/icon-plus.png);
width: 16px;
height: 16px;
cursor: pointer;
display: inline-block;
}
But image shows up like slightly upper than the text... and I can't solve it out...
I need your help...
Thanks, Zac.
that is due to line-height.
If you add height to an element where exactly does the text inside of it lie? That is,
if you have a block of text that is font-size: 10px (a theoretical height:10px) inside a container that is 60px where exactly is the text going to end up?
Most surely at the top of the container, because the text can only position itself where the text flows, inside a height:10px space.
But you can overcome that by using a line-height value the same height as the container, this way the text will take in the vertical-align property and align itself properly
Courtesy: Andres Ilich
Why dont you just use float on both?
Html code:
<div class="div_with_image"></div>
<div style="float:left;">Text</div>
Css code:
.div_with_image{
background-image: url(../beacon/images/icon-plus.png);
width: 16px;
height: 16px;
cursor: pointer;
float:left;
}
Have you tried to float the elements instead of using inline-block?
If you insist on inline-block, sometimes the end-start tags need to be on the same line:
<div class="div_with_image"></div><div
style="display:inline">Text</div>
Ugly, and I'm trying to find the question with a million upvotes that addresses this (this one?), but sometimes necessary. I think comments work too, if I recall.
you can try adding style="float:left" to both divs.
use float:left
<div class="div_with_image"></div>
<div style="float:left">Text</div>
DEMO
I have this annoying space under my picture for no reason.
I'm using www.getskeleton.com as the framework.
HTML code
<div class="four columns bottom">
<div class="box">
<img src="images/picture.png" title="" alt="">
</div>
</div>
CSS code
.box{
border: 1px solid #bfbfbf; /* ---- Border OUTSIDE*/
}
Although I'm sure this has since been resolved, I believe none of these answers are correct (or at least, the link from the "accepted" answer is dead).
The way to deal with this spacing issue (and why it isn't set in util libraries like normalize I'm not sure) is vertical alignment of the image. This'll solve it for HTML pages when using the HTML 5 doctype. Oddly, when using e.g., HTML 4.01 doctype, images will not exhibit this errant space below behaviour.
The fix:
img {
vertical-align: top;
}
I hope that helps someone who may have run into this problem.
Edit: Some extra info I noticed after writing this and subsequently researching why normalize doesn't set alignment on the img tag; the default alignment for images is vertical-align: baseline; - that's the behaviour which introduces the space underneath. Normalize's author believes this behaviour is consistent cross-browser, and so has decided not to 'normalize' this. I suppose that makes sense if you wanted text sitting next to an image to align properly with any subsequent lines of text. Some people also prefer to use vertical-align: middle as opposed to top to address this issue - so you can vary this as you wish.
However, regarding baseline alignment, in the case where I had an image that was so big that it was higher than the line-height, I'd probably be floating it or some other behaviour anyway... but there you go.
I've used the vertical-align stuff for a while now without any incident. But as always, do ensure you test for any repercussions for images no longer being aligned to the baseline.
Try this:
.box img {
display: block;
padding: 0px;
margin: 0px;
}
Try this: .box { font-size: 0; }
Your image need to be floated. Try this:
#yourimage{
float: left;}
As mentioned, more information would help a lot but i have no doubt that it is padding that is causing the border to go out of the image, reason put very simply being
margin pushes outside the element
padding pushes inside the element
as it were.
Fix then:
.box {
padding-bottom: 0px;
}
//to be sure that the image doesn't have any padding, even though OP said the .box img fix didn't help
.box img {
margin-bottom: 0px;
}
It's an age old quirk - the whitespace from your line formatting is causing the gap. Add
<br /> after the image.
Try this
.box{
display:flex
}
I have a problem that I've replicated in various browsers.
I have divs with images each in a wrapper http://jsfiddle.net/QnVYL/. The wrapper has a 1px border and 5px padding. The image inside is sized to 100% width.
For some reason, though, there is more than 5px between the bottom of the image and the bottom of its wrapper. See how the padding does appear to be equal on all sides of the images? There seem to be 3 pixels added from... somewhere. Firebug doesn't let me know where from.
How can I get rid of the space? I can't use absolute positioning to fake the padding because I'm not yet sure I'll always know the exact height of the image.
Help is much appreciated!
It is a known issue. Try:
img {
display: block;
}
It's a line-height. Images are rendered as inline-block elements by default. The line-height makes sure that following text does not stick to the image like here:
<img...><br>foo
Both these fixes are useful, depending on the situation:
.imgContainer { line-height: 0; }
img { display: block; }
No extra spacing if you add img {display:block}
http://jsfiddle.net/lexy0202/uxMu9/2
Like I guessed it is the display attribut:
#container {
display:block;
width: 50%;
margin: auto;
margin-top: 100px;
}
I am trying to add a width to a div, but I seem to be running into a problem because it has no content.
Here is the CSS and HTML I have so far, but it is not working:
CSS
body{
margin:0 auto;
width:1000px
}
ul{
width:800px;
}
ul li{
clear:both;
}
.test1{
width:200px;
float:left;
}
HTML
<body>
<div id="test">
<ul>
<li>
<div class="test1">width1</div>
<div class="test1">width2</div>
<div class="test1">width3</div>
</li>
<li>
<div class="test1"></div>
<div class="test1">width2</div>
<div class="test1">width3</div>
</li>
<li>
<div class="test1"></div>
<div class="test1">width2</div>
<div class="test1">width3</div>
</li>
</ul>
</div>
a div usually needs at least a non-breaking space ( ) in order to have a width.
Either use padding , height or   for width to take effect with empty div
EDIT:
Non zero min-height also works great
Use min-height: 1px; Everything has at least min-height of 1px so no extra space is taken up with nbsp or padding, or being forced to know the height first.
Use CSS to add a zero-width-space to your div. The content of the div will take no room but will force the div to display
.test1::before{
content: "\200B";
}
It has width but no content or height. Add a height attribute to the class test1.
There are different methods to make the empty DIV with float: left or float: right visible.
Here presents the ones I know:
set width(or min-width) with height (or min-height)
or set padding-top
or set padding-bottom
or set border-top
or set border-bottom
or use pseudo-elements: ::before or ::after with:
{content: "\200B";}
or {content: "."; visibility: hidden;}
or put inside DIV (this sometimes can bring unexpected effects eg. in combination with text-decoration: underline;)
Too late to answer, but nevertheless.
While using CSS, to style the div (content-less), the min-height property must be set to "n"px to make the div visible (works with webkits and chrome, while not sure if this trick will work on IE6 and lower)
Code:
.shape-round{
width: 40px;
min-height: 40px;
background: #FF0000;
border-radius: 50%;
}
<div class="shape-round"></div>
Try to add display:block; to your test1
I had the same issue.
I wanted icons to appear by pressing the button but without any movement and sliding the enviroment, just like bulb: on and off, appeared and dissapeared, so I needed to make an empty div with fixed sizes.
width: 13px;
min-width: 13px;
did the trick for me
By defining min width/hright for your element you can render it without content:
<div class="your-element"><div>
.your-element {
min-width: 100px;
min-height: 20px;
// This is only for observing the element space
background: blue;
}
may do the trick; works in XSL docs
If you set display: to inline-block, block, flex, ..., on the element with no content, then
For min-width to take effect on a tag with no content, you only need to apply padding for either top or bot.
For min-height to take effect on a tag with no content, you only need to apply padding for left or right.
This example showcases it; here I only sat the padding-left for the min-width to take effect on an empty span tag
You can use position:absolute to assign width and height directly, without any content.
that can easily do it if you are considering a single div.
Same problem, my initial css is width: 5px, updating it to min-width: 5px made the contentless div appear!
No need for extra height/min-height/padding/display properties
Perhaps the most elegant:
display: inline-block;
(credit: #Luccas suggestion in a comment under the top answer)