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.
Related
I have a problem with this site which I can't seem to figure out:
Link to site here
Somehow I get a white border at the bottom of the page.
When looking around people said it could be the padding so I added everywhere:
box-sizing: border-box;
and the only place it worked was making my width 100% Height is still more than 100%
I also tried but with no luck.
margin-bottom: 0;
Your footer element has display: inline-block. Add vertical-align: top to its CSS, this will remove that white space. (Otherwise it's aligned to the baseline by default, which creates some white space below that baseline)
if anyone still have this problem you can check if last div of page/bottom of page have "p"
All you need to do is p{margin:0;}
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 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
}
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
http://phplist.xxmn.com/node/1
why the two red box which locates at the center of the page(under Tags:) doesn't have the border bottom? the two red box html label is
<span>
and i applied the
border:1px solid red;
to it. but under IE7, the border bottom isn't show, firefox is ok. the out div box (the id=vistor_comment)is too heigh than under firefox? why? how to alter it. thank you.
try giving it also display: inline-block;
I think it is because the line-height in which the span resides is lower than the height of the span including border, and so the lowest few pixels are cut off, in this case just enough for your bottom border to disappear.
Your parent container has a height: 20px;, I'm assuming that is and your various paddings are causing a height issue in IE7, therefore cropping a portion of your child container. Set an IE7 specific height to see if it rectifies the issue.