I am trying to put an image in a container but for some reason, there is always a small additional space at the end of the image: Here is a fiddle with tests: http://codepen.io/anon/pen/sikAm. If you look at the last one in the right bar, there is no white because the container hides the overflow. This made me think that the problem happens because of the image, not because of the container. So the container's size gets that white because the image "pushes" an additional space inside. However, the image's size is correct and it has no margin that can add this at the bottom, so I might be completely on the wrong track:
img {
border: 0;
width: auto;
max-width: 100%;
height: auto;
}
I don't know what to do about this. What can cause that whitespace? What am I missing?
The problem is that, by default, images are inline elements, and its vertical-align property defaults to baseline. This alignment produces some space below the element.
To fix it, you can use
display: block [Demo]. This way the element will no longer be inline-level, so vertical-align won't apply.
vertical-align: middle [Demo]. This fixes the alignment problem. Other values may also work.
imgs are displayed inline by default, which creates spaces automatically for next line of texts.
Instead set the display to block. It will make those spaces gone.
img {
display:block
}
Related
I have images in a div while setting all margins and paddings to 0. I still get a little gap below the images inside the div. Why is the div larger than the images?
See this jsfiddle: http://jsfiddle.net/n6bz4tye/
Same effect in FF32 and Chrome 37.
I know, I can use negative margins/paddings to solve this, but I'd like to know, what's happening and why it behaves like that.
To get this clear: Take the letters A B C D. All straight , nothing goes over the bottom, nothing over the top. Now if you take the letter g y j, etc. You have some spacing on the bottom.
By standard all images are rendered as "vertical-align:baseline". And that is why there is this small room on the bottom. The images are positioned where the normal letters would go. On line with A B C D.
Take your fiddle and inside of the div "images" add after the last img "A and g". You will see that g will fill out all the space to the bottom.
An image is an inline element by default, like a letter and there is space below that line for the descenders that you find on letters and the default vertical alignment of an inline element (in your case the image) is baseline and you can adjust the vertical-align of the image to position it elsewhere.
You could remove the below space by set vertical-align: middle; to .images img
JSFiddle - DEMO
.images img {
width: 100px;
margin: 0px;
padding: 0px;
vertical-align: middle;
}
You could also reset this behavior globally by set vertical-align to img
img {
vertical-align: middle;
}
I've built a simple example pen: http://codepen.io/rpkoller/pen/tcwFj. I have a large image going completely across the whole container width. My goal was to get a div containing a headline and text to overlay one half of the image (in the example I've covered it completely).
Problem is I've assigned an height of 100% to the overlay div which refers to the parent article element - now the overlay is slightly higher than the image.
Guess it is due to the context.
Is there an elegant way to solve and work around that issue?
I think that the following works:
img {
width:100%;
max-width: 100%;
height:auto; //!important;
vertical-align: top;
}
img is inline and has a small space below it due to line leading.
Adding vertical-align: top fixes it.
See demo at: http://codepen.io/anon/pen/rfCuz
Alright, so this is some of the css and html:
css:
div {
height:24px;
line-height:24px;
}
html:
<div><img src="image.png"/>Text</div>
Now what that should (I think) produce is a div that is 24 pixels high, and the text should be vertically center aligned in the div, after the image. P.S. the image is 24x24px. However, it throws off the line-height to be about 12px too much (reducing the line-height to 12px does not solve it). Changing the image to be 12x12px though works and puts the text in the right spot. if the image is completely removed, the text is in the right spot. I guess my question is why is that doing what it is, and if/how I can fix it.
Thanks, sharf.
Give vertical-align:middle to img
div > img
{
float:left;
vertical-align:middle;
}
Fiddle
Try adding vertical-align to the img and experimenting with that to get it they way you want.
The simplest (but not always the best) solution is
img { vertical-align: bottom; }
The image does not throw off line height; rather, it causes the height of the line box to become larger than line-height. The reason to this is that by default, an image is treated as if it were a letter, of the size specified by the image dimensions, sitting on text baseline. Thus, the image requires a height that is the height of the image itself plus the distance between text baseline and the bottom of the font.
In CSS terms, “sitting on text baseline” is caused by the default setting of vertical-align: baseline. You can override this in various ways, with different effects on the vertical placement, but beware that browsers have many bugs in the implementation of vertical-align, and the value of bottom is so simple that they probably get it right.
I feel like CSS is much harder and confusing than C++ therefore I have few questions.
Consider following html body
<div id="mydiv1">12345~~~~~~~~/</div><div id="mydiv2">+_______67890</div>
And CSS
#mydiv1 {
float: left;
background-color: red;
margin-right: -30px;
}
#mydiv2 {
float: left;
background-color: blue;
}
which looks like this (in my latest Chrome)
which makes sense to me because second div is floating and it floats over first div.
On the other hand if I remove float property from mydiv2 only content moves but background box stays in the same place.
1) Could you please explain why ?
Now I'll remove margin and float, and add width to both divs making having CSS
#mydiv1 {
background-color: red;
width: 220px;
}
#mydiv2 {
background-color: blue;
width: 240px;
}
It will expectantly look like this
But if I add float: left to #mydiv1 it suddenly looks like this
2) Why did second div become twice as high ? I checked it by setting z-index of first div to -1.
PS. I've done tutorials on CodeAcademy and read float/margin-related articles on smashingmagazine.com. Sadly it didn't made everything crystal clear. If you guys can suggest online resources or book that would have explained these questions to me I'll appreciate it a lot.
<div> is a block-level element so it naturally fills the width of the container it's in. It makes its neighboring elements go above/below it, but not beside it.
Now, when you apply float to a block-level element, it no longer fills the width of the container, its width will be that of its contents. It also loses the ability to force its neighbors to go above/below it.
Note:The tricky bit is that the container holding the floated elements will not have a proper height because the floated elements are no longer part of the regular flow of content. (Here's how to get around it: http://www.quirksmode.org/css/clearing.html)
Regarding the last part of your question, if a floated element, eg. #mydiv1, is beside a block-level, eg. #mydiv2, then the block-level element wraps or flows around the floated element. It's one of the ways people can get text to wrap around an image in a news article.
When you remove the float from div2 it goes behind the floated div1, because floated elements does not take any height from it's content. You can say it's going out of the vertical flow of elements. However, it still take horizontal space from content. So the result is as expected here, once you "know the rules".
This should also explain the double height in your other example.
Here is a great article from css-tricks.com
I hope that helps!
If we don't give either float or width to any block level element like div then it occupies the entire width of the container.
Instead of float you can give some width and display: inline-block. This display property will display content inline and behaves like a block level element.
On, e.g., this link: http://4ad.com/releases/20949, if you look at the album cover image in the top right part of the page, the black border is not quite square: there are a few extra pixels of height at the bottom.
As far as I can tell the image is 300x300 pixels in size. There are no obvious (to us!) sources of the extra 4.5 pixels of height. Does anyone know what could be creating such a discrepancy?
Since the image is inline, it's treated as text, which means a few extra pixels are added to the bottom as leading. Displaying the image as a block (i.e. adding display: block;) solves the problem nicely.
By default, images are displayed as inline-block and aligned with the baseline of the text.
The extra space is added for Descenders.
To fix it, use vertical-align: top or middle or bottom on the img. See http://jsfiddle.net/Gu6pG/3 for the difference.
Change image to be displayed as block element by adding this setting to your style.css file:
/* consolidate this CSS style */
#rightbox_packshot img {
width: 300px; /* from line 2896 in style.css */
height: 300px; /* from line 1498 in style.css */
display: block;
}
Alternatively you could use float:left (or right) in place of display:block which does make the image a block element but allows you to keep additional text (if you have it) inline.