I'm having a strange problem. I want to put border around the image, but it is showing some space at the bottom. Please have a look here: http://jsfiddle.net/4WKJY/
I don't want to put fixed height and width. Thanks for any help.
Contrary to the other answer, it has nothing to do with whitespace in the markup, and removing the whitespace won't fix this.
The problem is that images are inline by default and the initial value for vertical alignment is baseline. This means that the image is treated as if it were any other textual component of the page, and space is reserved beneath textual content for descenders - the tails on letters like lowercase 'j' etc.
To fix this, you either need to tell the rendering engine that the image shouldn't be treated like textual content - .thumb img { display: block; } will do this - or you can tell the rendering engine not to reserve space for descenders, and instead align the content to the very bottom - .thumb img { vertical-align: bottom; } will do this.
Edit: I seem to recall that old versions of Internet Explorer incorrectly handle whitespace, so removing the whitespace may have an effect there, but what I said above still stands; removing the whitespace is not a cross-browser fix for this problem.
You can fix it by making the img display:block in your CSS, as seen here.
Alternatively, apply the css only to images:
.thumb img{
position: relative;
padding:2px;
float: left;
margin: 0px 0px 5px 5px;
border: solid 1px #ccc;
}
Related
I have some unexplainable image margin/Space below img when including images in my wordpress theme. You can see it here: http://www.wlanradios.net/logitech-squeezebox-radio/
See the Amazon logo image inside the content or scroll down and have a look in the "Ähnliche WLAN Radios" sidebar widget with the small thumbnails. The images seem to have a little margin-bottom / Space below it I can not get rid off. I discovered the html/css with firebug but don't get the it where this margins comes from. I in fact tried to
img {
margin:0!important;
padding:0!important;
border:0!important;
}
to overwrite every possible causes for the margin, with no success.
Where is the margin coming from and how to remove it?
Just put to those imgs :
display: block;
UPDATE:
Some explanations: img is an inline element, so it has to deal with white-space, line-height, etc., as all inline elements. I guess the space you're seeing is actually caused by the line-height. So another solution if you want to keep your img as inline elements is to set its parent line-height: 0;.
Have you tried: vertical-align: middle
I have Deeply inspected the Issue, its a bit of haystick needle kind of thing.
1) Amazon Image box - Issue is with the td tag which creates a all sides padding of 6.71667px , This is FORCEFULLY created by the td,th padding which is set to 0.5em
th, td {
border-spacing: 3px;
//Tweak this Padding of 0.5em and you should destroy Amazon Extra Space
padding: 0.5em;
border: 1px solid #CCC;
}
You should be able to find and edit from line 183 of the above css theme from wp-content/themes/ar2-2-b-2-fixed/styles.css
2) Coming to the second issue with WLAN Radios Pic , This image is pushed in due to the DIV tags Padding all set to 4px which is acting on the WLAN Radio pics.
Here are the Issue Pics:
Amazon Image Issue Solved Pic
Hope this Helps :)
Check for your line-height on the img elements, and set it to 1. You must have a line height > 1 on a parent element.
You can also change the display of those img to 'block' (to avoid line spacing).
This is a common problem but I can't figure out why it happens.
I have a parent div and inside that div I have 3 divs with width set to 33% (exactly, not 33.3%!) and display: inline-block.
In Chrome it works well, but in Mozilla and Opera it does not (I didn't test it in IE yet). I thought the problem might be in the algorithm browsers use to calculate pixel sizing from percentages. But when I checked the DOM metrics, I found that the parent's width is 864px and the child's is 285px (that's correct: 864 * .33 = 285.12). But why doesn't it fit in the parent? 285 * 3 = 855, that's 9px less than parent's width!
Oh, yes, padding, margin and border for all divs set to 0 and DOM metrics confirm that.
Whitespace in the HTML source code
In the HTML source code, When you have lines of text or images, or elements that are inline-block, if there is any whitespace between them (blank spaces, tabs, or new lines), a single blank space character will be added between them when the page is rendered. For example, in the following HTML, a blank space will appear between each of the four pieces of content:
one
two
<img src="three.png"/>
<span style="display: inline-block;">four<span>
This is very helpful for lines of text, and for small images or HTML elements that appear inside a line of text. But it becomes a problem when inline-block is used for layout purposes, rather than as way to add content inside a paragraph of text.
Removing the extra space
The safest, cross-browser way to avoid the extra 4px or so of space that's added between inline-block elements, is to remove any whitespace in the HTML source code between the HTML tags.
For instance, if you have a ul with 3 floated li tags:
<-- No space, tabs, or line breaks between </li> and <li> -->
<ul>
<li>...</li><li>...</li><li>...</li>
</ul>
Unfortunately, this hurts the maintainability of the website. Besides making the code unreadable, it severely compromises the separation of data and formatting.
If another programmer comes along later and decides to put each li tag on a separate line in the source code (unaware of why the tags were on the same line, or possibly running it through HTML Tidy and not even having a chance to notice any related HTML comments), suddenly the website has a formatting bug that may be difficult to identify.
Consider floating elements instead
The whitespace behavior strongly suggests that it may be inappropriate to use inline-block for general-layout purposes, to use it for anything other than adding content inside the flow of a paragraph of text.
Plus, in some cases inline-block content is very difficult to fully style and align, especially on older browsers.
Quick summary of other solutions
Put the close tag on the same line as the next open tag, with no white space between them.
Use HTML comments to fill all of the whitespace between the close tag and the next open tag (as #Arbel suggested).
Add a negative left margin to each element (usually -3px or -4px, based on the font-size). I don't recommend this particular approach.
Set the font-size for the container element to 0 or 0.01em. This doesn't work in Safari 5 (not sure about later versions), and it may interfere with Responsive Design websites, or any website that uses a font-size unit other than px.
Remove whitespace-only text nodes from the container using JavaScript or jQuery. This doesn't work in IE8 and earlier, as text nodes are not created in those browsers when there's only whitespace between elements, though space is still added between the elements.
Set letter-spacing and word-spacing for the container (as #PhillipWills suggested). Further info. This requires standardizing em sizes on the website, which may not be a reasonable option for all websites.
Add text-space-collapse: discard; to the container (previously called white-space-collapse). Unfortunately, this CSS3 style is not yet supported by any browsers, and the standard hasn't been fully defined.
If you don't want to mess up the HTML formatting e.g. having all the elements with inline-block written in one line for future readability and also get rid of the extra white space that is added between them, you can "comment" the white space.
For example in your code this will solve the problem, it will even work with 33.3% instead of 33%:
.parent {
width: 100%;
}
.child{
display: inline-block;
width: 33.3%;
}
/\
<div class="parent">
<div class="child">bla-bla1</div><!--
--><div class="child">bla-bla2</div><!--
--><div class="child">bla-bla3</div>
</div>
A space is added between the inner divs. There is some CSS voodoo to correct this problem:
div {
letter-spacing: -.31em;
word-spacing: -.43em;
}
div div {
letter-spacing: normal;
word-spacing: normal;
}
Of course, you'll probably prefer to use classes or something to differentiate between parent and children.
Add float:left;
.parent{
width: 100%
}
.child{
float:left;
display: inline-block;
width: 33%
}
http://jsfiddle.net/H6Whc/1/
Has anyone tried display: table? If that's not a good idea, why not? This works in all modern browsers and I tested it down to IE9.
.parent{
display: table;
width: 100%;
}
.containers {
box-sizing: border-box;
border: 1px solid #000;
height: 50px;
width: 33.3%;
display: table-cell;
}
This is a mentioned by a number of comments and by #Avin, but removing display: inline-block and replacing it with float: left works.
.parent{
width: 100%
}
.child{
float:left;
width: 33%
}
This is a common problem, but it can be sorted out very easily by assigning the display: table CSS property to the parent div.
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 would like to put 3 horizontal line in a row.
Does anyone know how to put an horizontal line displaying in inline-block in IE7 ?
Here is my CSS:
hr.small {
width: 28.9%;
margin-right: 6px;
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
height: 3px;
border: 0px;
color: #7c8690;
background-color: #7c8690;
}
but it doesnt works.
here is the JSFiddle Link: http://jsfiddle.net/sRuz3/6/
If anyone has a solution.
Thanks a lot.
Here you go: http://jsfiddle.net/eq3Z2/
It works in IE7 also.
Granted, they aren't HRs. They are DIVs. Trying to render the HR as an inline element
is tripping up IE7 but I don't know of a workaround.
Does it have to be inline-block? Can you not simply float them and set a height if necessary?
Edit - Example:
hr.small {
float:left;
width: 28.9%;
margin-right: 6px; /* Choice: Use border instead or halve the margin for IE7 and lowwer (double margin float bug). */
height: 3px;
background-color: #7c8690;
}
Edit again - Question:
Is this going in a fluid layout and how big is the container? You are setting a dynamic width but a fixed margin, this will cause issues in small scale and introduce unwanted white space to the far right in large scale. If it is a fixed area then consider using a fixed width.
It seems there's a solution if you can wrap the hrs in divs.
Set the div's to display:inline (we could use spans instead but hrs are not valid in spans)¹ and also give the divs hasLayout via zoom:1
See http://jsfiddle.net/YqKDJ/1/
¹ As an aside, there's a reason why hrs are not valid in spans and it's relevant here. An hr is not primarily a way of drawing a horizontal line - it has a specific semantic meaning of "Thematic break". It makes no sense to have two or more hr elements with no content betwwen them - there's nothing for the second thematic break to break from. If you want multiple horizontal lines for presentational purposes, you should use CSS to create them, along the lines of #Cynthia's answer.
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;
}