How can I eliminate spacing between inline elements in CSS? [duplicate] - html

This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 8 years ago.
I have a div with a bunch of image tags inside, here is an example:
<div style="margin: 0; padding: 0; border: 0;">
<img src="foo1.jpg" alt="Foo1" />
<img src="foo2.jpg" alt="Foo2" />
<img src="foo3.jpg" alt="Foo3" />
</div>
Because there is whitespace between the tags, browsers will display some whitespace between the images (Chrome decides on 4px). How can I tell the browser to show NO whitespace whatsoever between the images, without placing the > and < directly next to each other? I know letter-spacing applies in addition to what the browser decides to use, so that's useless even with a negative value. Basically I'm going for something like Twitter has at the bottom of their home page. I looked at their code and they're using an unordered list. I could just do that but I'd like the technical explanation for why there appears to be no way to eliminate the white space from between these images.

If you for some reason want to do it:
without using floats, and;
without collapsing the whitespace in your HTML (which is the easiest solution, and for what it's worth, what Twitter is doing)
You can use the solution from here:
How to remove the space between inline-block elements?
I've refined it slightly since then.
See: http://jsfiddle.net/JVd7G/
letter-spacing: -1px is to fix Safari.
div {
font-size: 0;
letter-spacing: -1px
}
<div style="margin: 0; padding: 0; border: 0;">
<img src="http://dummyimage.com/64x64/444/fff" alt="Foo1" />
<img src="http://dummyimage.com/64x68/888/fff" alt="Foo2" />
<img src="http://dummyimage.com/64x72/bbb/fff" alt="Foo3" />
</div>

Simplest solution that doesn't muck with layout and preserves code formatting:
<div style="margin: 0; padding: 0; border: 0;">
<img src="foo1.jpg" alt="Foo1" /><!--
--><img src="foo2.jpg" alt="Foo2" /><!--
--><img src="foo3.jpg" alt="Foo3" />
</div>

try to add img {margin:0;padding:0;float:left}
in other words remove any default margin and padding of browsers for img and float them.
Demo: http://jsfiddle.net/PZPbJ/

The spacing causes the images to move as they are inline elements. If you want them to stack up, you could use the unordered list (as twitter does) as this will put each image inside a block element.
Inline elements are displayed inline with text.

You can also make all anchors to float-left and set margin-left to -1

It looks like using a table is the correct way to go about this, as whitespaces have no effect between cells.

If you are serving your pages with Apache then you can use the Google PageSpeed Module. This has options that you can use to collapse whitespace:
http://code.google.com/speed/page-speed/docs/filter-whitespace-collapse.html
You do not have to use the more 'dangerous' options of PageSpeed.
Also see the answers in this question for how to remove whitespace in CSS:
Ignore whitespace in HTML

Add style="display:block" to your img tags.

Related

Apart from <HR/> Is there any other options for drawing line in Bootstrap3?

I found <HR/> tag in BootStrap3 is having much margin. I am developing page which has compact look during this <HR/> is not looking good on my page. Can you have any other options which allows me to draw a line in Bootstrap 3 ? Or how to remove margin of <HR/> tag of BootStrap3.
Surely you have custom CSS for your project. Add a bit more:
hr.my-class {margin: 0;}
<hr class="my-class" />
Or simply:
hr {margin: 0;}
Since you asked for "another way" to draw a line. Often, I've used a bottom border for a tag as a sort of underline/divider, e.g.
.underline {
border:solid #CCC;border-width:0 0 1px 0;
}
You could drop this into a heading tag, into your .row, or whatever and get an underline that will not take up any space other than the height of the line itself.

Two <img> without spacing

<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>HAHAHA</title>
<STYLE TYPE="text/css" media="screen">
*
{
padding: 0;
margin: 0;
}
body
{
padding: 0;
margin: 0;
}
#flexbox
{
//display: -webkit-box;
//-webkit-box-orient: horizontal;
//-webkit-box-align: stretch;
//width: auto;
}
</STYLE>
</head>
<BODY style="padding:0;margin:0;border:0;">
<!--<div id="flexbox">
<img src="1.jpg" width="100px" style="padding:0;margin:0;"/>
<img src="1.jpg" width="100px"/>
<img src="1.jpg" width="100px"/>
</div>-->
<img src="http://is.gd/kjxtj" style="padding:0;margin:0;border:0;"/>
<img src="http://is.gd/kjxtj" style="padding:0;margin:0;border:0;"/>
</BODY>
</html>
Why do these images always have a small space in between them, even if i have padding & margin set to 0 on body and all other elements in page?
OK this is the full unedited code.
EDIT: just found out its the line break between the two IMG.
SO... i cannot press enter between the two elements? lol... :)
i cannot press enterin between the two elements? lol... :)
Nothing distinguishes one type of white space from another in most parts of HTML.
You can, however, format your code such:
<img src="..." alt="..."
><img src="..." alt="...">
… to remove the space between the elements.
images are displayed inline by default, which is likely your issue. White-space characters in HTML are condensed, however they will still appear as a space if any exist between HTML elements.
The following HTML will render with a slight space between images.
<div class="images">
<img src="http://placehold.it/400x300" />
<img src="http://placehold.it/400x300" />
</div>
If you'd like to make them flush against each other, you could try floating the images:
img {
float: left;
}
Floating comes with its own issues if you're new to CSS.
An alternative is to adjust the markup to get rid of extra white-space characters. A common way to do this is called "fishy" syntax:
<div class="images"
><img src="http://placehold.it/400x300"
/><img src="http://placehold.it/400x300"
/></div>
The way it works is that the closing > character of each element is moved to just before the beginning < character such that there's no white-space within any HTML element as content. Instead, the white-spaces for indentation are within the HTML tags, where the white-space is ignored completely.
There was a w3c feature request for a new property on white-space, which could theoretically allow CSS to remove all spaces from an element. The orignal proposal was white-space: ignore; however I much prefer (and suggested) white-space: none;.
It appears, however, that updating white-space is not likely to happen, and instead the suggestion was to use flexbox to remove spaces appropriately:
extending off the original HTML example:
.images {
display: flex;
}
Of course, it will be some time before flexbox has enough cross-browser support to be useful in a commercial environment, so for the time being I recommend sticking with the fishy syntax.
There's a good trick to overcome this:
Place your images inside a <div> and then set
font-size:0px;
to the <div>.
You can continue keeping the elements on separate lines.
I believe this is also necessary if you are viewing in an older version of IE
img {
border:0
}
While I think the problem is coming from another point in your mark-up, and/or CSS, I would suggest ensuring that you've zeroed out both margin, padding and border for the img element:
img {
margin: 0;
padding: 0;
border-width: 0;
}
This should take care of the problem, but if not we may need to see your real html and css (or a live demo that reproduces the problem, at JS Bin, or JS Fiddle) to help you further.

What do you call this gray line thing in HTML

What do you call this "gray line" in HTML, where you can use like a separator?
<hr /> is this what you mean?
this is called a horizontal rule and can be created using the following:
<hr />
However, the fact that the line is gray is online its default behaviour. Using CSS you can style it as you like.
I assume you're talking about the <hr /> element. HR stands for horizontal rule.
You're probably referring to <hr/>, which is a Horizontal Rule.
<hr />, which is horizontal rule
It doesn't need to be gray either as it can take styles just like anything else, although how these behave in different browsers can be tricky.
Do you mean simply a nicely formatted | character?
Or perhaps a horizontal rule? <hr />
One thing I always found was CSS control over an HR tag is very limited, I always tend to go for a div defined in my CSS as being long and thin.
you can customize the <hr/> by
<hr style="margin: 0px 5em; border: 1px solid grey; border-radius: 1em; background-color: gray;">

<br /> HTML tag not cross-browser compatible

I have an issue with the HTML <br /> tag.
I have 2 images above each other.
With no <br /> between the two, the bottom border of the top image touches the top border of the bottom image which seems to be what it is supposed to be.
Then if I put 1 <br />, there should be some space between the 2 images. If I put 2 <br />, there should be even more space.
Here is the problem
Firefox version 3.5 seems to ignore the first <br />. If I put 2 then it puts some space between the 2 images.
IE7 puts some space between the 2 images even if I don't put any <br />
Things work fine in Chrome or Safari, i.e. there is no space with no <br />, some space with 1 <br />, more space with 2, etc...
I have not tested in IE8.
Is there a way to get around the fact that browsers don't seem to interpret the <br /> tag the same way?
Thanks for your insight!
Try using css to position the images rather than relying on the br tag.
img { display: block; margin: 0 0 20px 0; }
For example.
First of all you should make sure that you have a valid doctype on the page, so that it renders in standards compliant mode. That will minimise the differences. W3C: Recommended list of DTDs
The <br /> tag is not HTML, it's XHTML. If you are using HTML you should use a <br> tag instead.
If you don't have any break between the images, they would be displayed on the same line. If there isn't room for that, the browser will break the line and place one image on the next line. If you add a break between images that has already been broken into two lines, that makes no difference.
However, in some modes some browsers make a difference between images that are by themselves and images that are part of a text. Adding a break between the images means that they are part of a text, and the browser will display the image placed on the base line of a text line. This means that there is some space below the image that is the distance from the base line of the text line to the bottom of the text line, the space used for hanging characters like g and j. Depending in the size of the images and the line height, there may also be some space above the image.
To ensure that the images are not displayed as part of a text you should turn them into block elements. You can use the style display:block; for this. You can also use float:left; or float:right; to make an image float, that will automatically make it a block element.
The size of the br element depends on the font size/line height. Have you considered just setting display block on the image elements and setting a bottom margin, and maybe adding a 'last' class on the last one so it doesn't have a bottom margin?
<!doctype html>
<style>
body { background:gray; }
div#gallery .row img { display:block; margin:0 0 1em; }
div#gallery .last img { margin-bottom:0; }
div#gallery .row .thumb { float:left; width:5em; }
div#gallery .row { clear:both; width:50em; overflow:hidden; }
</style>
<div id="gallery">
<div class="row">
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
</div>
<div class="row last">
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg></div>
</div>
</div>
Though in this example it'd be easier to set a bottom margin on the row itself.
if you want to use the tag you can do it so :
<br style="line-height:?px; height:?px" />
where ?px = how many px it`s needed to show the result you need
OR
you could use:
<br clear="all" />
it should work...
if you want to use CSS you could do it so :
<style>
img.newline{
display:table-row;
}
</style>
<img src="1.jpg" class="newline"/>
<img src="2.jpg" class="newline"/>
it should work.. these are quick ways to do it.. you can use css and make something great.. but what i wrote here are "quickies" and most simple/fastest ways i thought of.
The br element is a presentation element that offers no descriptive value. Most browsers tend to apply default presentation to different elements that can differ slight from browser to browser. So, I would strongly recommend not using the br element and instead using a span tag and CSS to ensure your presentation is uniform across various browsers.
Are you set up like this?
<img src="1.jpg" />
<img src="2.jpg" />
The correct behavior is actually to not line break between the images, they should appear on the same line. The first BR tag added should bring the second image to a new line, then the second BR should create a gap.
It might fix it if you specifically tell your images to line-break themselves, so they appear on separate lines even without a BR.
I would add one thing to DanTdr's response. If you don't add a small font size for the BR tag then you run into problems in IE because of it's hasLayout behavior. The BR would be a minimum of 1em.
<br style="line-height: ?px; height: ?px; font-size: 1px;" />
After being frustrated for some time with not getting BR tags to render the same in Firefox and IE this font-size: 1px; style finally made my layout appear the same in both browsers.

How to get rid of an unwanted space in a tab menu?

I am using asp.net mvc and I am working on a tab menu which is displaying an unwanted space between each tab. This only happens when I have each image tag on its own line as opposed to having it all in one.
The top images are on their own line which is what is causing the unwanted space:
<img src="/Content/Images/Reports_white.png"/>
<img src="/Content/Images/Audit_white.png"/>
<img src="/Content/Images/Messages_white.png"/>
<img src="/Content/Images/Admin_white.png"/>
versus the desired effect on the bottom half of the image:
<img src="/Content/Images/Reports_white.png"/><img src="/Content/Images/Audit_white.png"/> ...
How can I get rid of this space without having to keep them all on one line?
I'd contain your tab images in an unordered list like this:
CSS:
ul.tabs
{
list-style:none;
padding:0px;
margin:0px;
}
ul.tabs li
{
padding:0px;
margin:0px;
float:left;
}
HTML:
<ul class="tabs">
<li><img src="/Content/Images/Reports_white.png"/></li>
<li><img src="/Content/Images/Audit_white.png"/></li>
<li><img src="/Content/Images/Messages_white.png"/></li>
<li><img src="/Content/Images/Admin_white.png"/></li>
</ul>
That way you can control the spacing using padding or margin.
one technique is to do
<img src="/Content/Images/Reports_white.png"
/><img src="/Content/Images/Audit_white.png"
/><img src="/Content/Images/Messages_white.png"
/><img src="/Content/Images/Admin_white.png"/>
Since you will probably want the tabs to be clickable you will need to add some elements DIV for example around the images. Make sure those elements have no margins and you can have whitespace inbetween the divs in the source no problem.
<div><img src="/Content/Images/Reports_white.png"/></div>
<div><img src="/Content/Images/Audit_white.png"/></div>
<div><img src="/Content/Images/Messages_white.png"/></div>
<div><img src="/Content/Images/Admin_white.png"/></div>
Any space between tags, e.g. a new line, are interpreted as white space. This only really affects inline elements, which <img> elements are so hence your problem.
You could also try adding float: left to the elements which will stack them horizontally without any spacing. Presumably you're actually implementing these as hyperlinks, we'd have to see the exact markup to suggest a specific solution for it.
Short answer: Remove the spaces between the img tags and make sure they have no margins.
If you don't want to bother about having spaces in the HTML, take some time to make them float:left, contained in a div (overflow:hidden will get its height correct).