<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.
Related
Here is an HTML code to reproduce the problem:
<!DOCTYPE html>
<html>
<body>
<div style="width:800px; margin:0 auto;">
<img src="logo.gif" width="100" height="40" />
</div>
</body>
</html>
When it is rendered in a desktop browser, the height of the only <div> becomes 45 pixels but not 40 as I expect (tested this in IE11 and Opera Next v20). logo.gif is 100x40, and the situation remains the same even if I apply zero border through CSS to the <img> tag (border, border-width, etc).
Why does it happen and how to fix it?
I believe it is not a bug as it is rendered the same way in all major browsers. The problem is fixed if we set just the display:block style. Without this, the image is rendered as an inline element, and its bottom border is aligned to the so called text baseline.
Let's change our code to demonstrate this:
<!DOCTYPE html>
<html>
<body style="background-color: #FFFF99;">
<div style="width:800px; margin:0 auto; background-color: #00CCFF;">
<img src="logo.gif" width="100" height="40" style="border: 3px solid black;" />
Some text yyy qqq
</div>
</body>
</html>
The result is the following:
As you can see, the extra space is needed to render the text without clipping!
I found a confirmation of that in the well-known book by Eric Meyer CSS: The Definitive Guide - in the section dedicated to alignment, when it describes the {vertical-align: baseline} attribute for the <img> tag. Here is the corresponding excerpt:
This alignment rule is important because it causes some web browsers always to put a replaced element's bottom edge on the baseline, even if there is no other text in the line. For example, let's say you have an image in a table cell all by itself. The image may actually be on a baseline, but in some browsers, the space below the baseline causes a gap to appear beneath the image. Other browsers will "shrink-wrap" the image with the table cell and no gap will appear. The gap behavior is correct, according to the CSS Working Group, despite its lack of appeal to most authors.
Same issue in FireFox and IE and Chrome.
You can fix this with a hack and add a Height:40px; to your div (I had to use an image to with the same width/height as your logo so don't be surprised that I have a different picture)
<div style="width:800px; margin:0 auto;border:solid;height:40px;">
<img src="http://a2.mzstatic.com/us/r30/Video/16/96/5f/mzi.rxlappss.100x100-75.jpg" width="100" height="40" />
</div>
Or, add some CSS to your image tag and keep the original code as is (will affect all images which may not be desirable)
img {padding:none;margin:none;display:block;}
http://jsfiddle.net/h6wrA/
Or, you can do this for only certain images with http://jsfiddle.net/h6wrA/2/
The only way I found to fix this problem correctly without height hacks, etc. is to set the container to line-height:0; (see demo example below).
.image { background:red; }
.image-fix { line-height:0; }
Image without Fix:
<div class="image">
<img src="http://via.placeholder.com/100x100" alt="">
</div>
<br>
Image with Fix:
<div class="image image-fix">
<img src="http://via.placeholder.com/100x100" alt="">
</div>
This is not a issue , you just need to write a correct CSS. Try
height:40px;display:block; for div tag and keep margin:0,padding:0
Thats all...
My problem is that the images I want to be displayed inline, are displayed in a list form. I don't know what am I doing wrong, because in my opinion everything is correct.
html
<div class="loga">
<img style="display:inline;" src="photos/logoWUT_czarne.PNG" width="370" height="135">
<img style="display:inline;" src="photos/bosch_logo_gray.png" height="115" width="380" >
<img style="display:inline;" src="photos/general-electric-logo-png_gray.png" height="115" width="115" >
</div>
CSS
.loga {
display: inline-block;
}
There must be something wrong with my code, because it does not work in any browser.
is there enough width for body or any parent tags, or browser window?
you may wanted this,
http://i.imgur.com/fSrShkT.png
but if there no enough width it could displayed like this
http://i.imgur.com/Fdx6jgS.png
If you don't give the .loga div the style inline-block for other reasons than the question, just remove it. The default display property is block.
They are already inline. But they have to drop to the second line because of the line width. So all you have to do is enlarge the .yoga by giving it a width:100% or width:500px etc...
It turned out that it is a Drupal "feature" to add <br> tags at each end of the line, even in the "Full HTML" mode. To disable it you have to go to Admin>Configuration>Input Formats, select "configure" to the right of "Full HTML", and uncheck the box labeled "Line break converter". Now everything works fine.
Images default display properties - inline-block.
img {
display: inline-block;
}
Try it:
.loga {
display: block;
width: 900 px;
}
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.
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.
Unfortunaly this site we're developing has to be IE6 compatible. It contains a horizontal block style menu, but there's still one more problem with IE6.
I have the following code:
<html>
<head>
<style type="text/css">
a {
display: block;
width: 0px;
background-color: red;
}
</style>
</head>
<body>
This is a anchor tag
</body>
</html>
Because of the spaces, it wraps every word on a new line. What do I need to do if I want it on a single line only?
Thanks!
Add this css on the a element:
white-space: nowrap
Have you tried popping your anchor into a span or div?
Well, don't set its width to 0 would be the cross-browser proper approach.
Use float: left instead, if you want the anchor to be displayed in block mode but not allocate 100% width.
When you use floats like that, you also need to make sure you clear them, to make them occupy space in their container:
<div>
<a ... />
<a ... />
<div style="clear: both;"></div>
</div>