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;
}
Related
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;
}
http://www.dirkdunn.com/web2
I recently made a responsive layout, setting the..
max-width:100%;
property in google chrome, which works perfectly for adjusting the header image size, however, in other broweser's such as firefox, the image overlaps the parent container on the left size.
I am familiar with scott jehls picture.js polyfill, however specifying the image size for each screen size sounds like a headache inside the picture tags, is there any way to combat this in other browsers similarly to how google chrome resizes this naturally?
or at the very least, is there some kind of math formula for knowing the right picture size via the browser width? thanks.
You have set the max-height of img to 100%, however you don't have the width of it's parent defined. So, it becomes confusing to the browser to determine 100% of what thing.
Let's give the parent a width -
#headlogo {
width: 100%;
}
Also set the margin accordingly, you might wanna use margin: 0 for #headlogo.
Simply remove the h1-parent of the image and it works. (FF 32)
Try this one
max-width: 100%;
display:block;
height: auto;
Assuming you are trying to center the logo.
I would remove the float: right from the H1 and remove the margin you have. Than I would add a text-align: center to the H1. This will solve your responsive logo issue and keep the logo centered.
Your Current CSS
#headlogo {
float: right;
margin: 0 15% 0 0;
}
Proposed Solution CSS
#headlogo {
text-align: center;
}
More frequently then not I come across this issue. Generally I use padding instead of the margin or some quick solution to fix my problem but I too know this is not the correct fix.
Without going deep into writing my issue, I like create a fiddle for better understanding. So here is my fiddle.
.container-node {
margin: 10px;
background-color: #0f0;
}
.content-node {
margin: 20px;
background-color: #f00;
padding: 5px;
color:#fff;
}
.border {
border:1px solid #00f;
}
The issue that I'm trying to point out is if I've two divs, one inside the other and the inside div is given some margin, it takes the margin value differently if the container is bordered and differently if the container does not have a border.
I appreciate any help or documentation on this. Thanks
http://www.w3.org/TR/CSS2/box.html
Read carefully 8.3.1 Collapsing margins
Two margins are adjoining if and only if:
no line boxes, no clearance, no padding and no border separate them
The best solution of this ptoblem i know is clearfix. Its not giving padding or overflow but similar to it.
Fiddle
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
As already pointed out it is a "problem" with collapsing margins. A really good read about this issue can be found here:
http://reference.sitepoint.com/css/collapsingmargins
You could just add a padding of 1px and reduce the margin by 1 like so:
.container-node {
margin: 9px;
background-color: #0f0;
padding: 1px;
}
Applied to your problem:
http://jsfiddle.net/n65bX/1/
The .content-nodes margin doesn't work properly, it doesn't have an element to push from. With the border property you define the contour of the element(Based on the border, the margin can push from there).
To easially fix this, you can add a padding to your .container-node instead of the margin on .content-node:
.container-node {
/*margin: 10px;*/
padding: 20px;
background-color: #0f0;
}
Also you are creating your yellow border with a margin. I would suggest you to use also padding for this on the proper element:
.root-node {
border: 1px solid #bababb;
background: #ff0;
margin: 10px 0;
padding: 10px;
}
with proper i mean to the relevant element. You gave an yellow background to .root-node element, so you should also define the size of that element on that element.
It's far more logic to use it this way :)
When you want to create an inline spacing use padding, if you want it to go outside use margin.
jsFiddle
This might also be usefull: When to use margin vs padding in CSS
Update
So you may ask yourself: why isn't the element(.content-node) pushed away based on the parent(.container-node) element?
Well it's fairly simple why this happens. The margin still pushes the element(.content-node) away, only it's based on the wrong element(it is pushed from the .root-node). This is why your yellow border is bigger as the one with the border.
So why is it pushed at the root element?
To debug it even more; let's only set margin to the left and right of the .content-node:
margin: 0 55px;
jsFiddle
It seems that only the top-margin didn't work. And it indeed seems that the margin is collapsing.
I found this topic about this matter: Why does this CSS margin-top style not work?
So i would suggest to use padding so margins aren't conflicting with each other (paddings can never interact in the same 'flow' with each other).
I will try to explain this the best I can.
In the element containing the "container-node", there is no 'area' for that container to give margin to.
By adding sample text before/after , you will see the margin working. Likewise, if you give the "container-node" a border or even padding, you will then provide that element with something for the "content-node" to position against.
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'm having trouble figuring out why border-radius is gone from my #screen element when using chrome but not firefox or ie9?
I have all the different prefixes for each browser plus the standard border-radius:
www.cenquizqui.com
The upper content box that holds the pictures, called #screen
a copy paste of screen's css:
#screen {background: none repeat scroll 0 0 #EEEEEE;
display: block;
height: 300px;
position: relative;
width: 960px;
overflow:hidden;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;}
Is it because chrome does not handle the 'trimming' of the images properly? I thought it was only a problem when you had the actual tags inside the rounded corner container, not when the img is called as background-image through css.
Regards
G.Campos
Here's a workaround that will fix the current chrome bug:
.element-that-holds-pictures {
perspective: 1px; /* any non-zero value will work */
}
This won't affect the display at all (unlike the opacity:0.99 workaround - which is great workaround, too, by the way).
Webkit cannot handle border-radius cropping for children and grand-children+. It's just that bad. If you want border cropping, it has to be directly on the div the image is placed on without going any deeper down the hierarchy.
There is a much simpler solution.
Just add overflow:hidden to the container that has the border-radius and holds the child elements. This prevents the children 'flowing' over the container.. Thus fixing the problem and showing the border-radius
Try the following css to the child elements of the element with border-radius set:
opacity:0.99;
It solves the problem and doesn't change the opacity much.
This worked perfectly for me.
It looks like you need to apply the border radius to the li element:
#slides li {
display: block;
float: left;
height: 300px;
width: 960px;
position: relative;
border-radius: 10px;
}
It very much does have a border radius:
(I just added a border with Chrome's dev toolbar.)
The border radius doesn't restrict its contents to within the resulting area—the space outside the corners are still occupiable by the element's contents.
My recommendation would be to overlay an image that had the corners cut out like that (and then use a map or whatever you feel comfortable with to still enable the left/right arrows).