Removing whitespace between HTML elements when using line breaks

Question

I have a page with a row of about 10 imgs. For readability of the HTML, I want to put a linebreak in between each img tag, but doing so renders whitespace between the images, which I do not want. Is there anything I can do other than break in the middle of the tags rather than between them?

Edit: Here is a screenshot of what I have so far. I would like the book spine images to display in random combinations, using PHP. This is why I need separate img tags.

Answer 1

Sorry if this is old but I just found a solution.

Try setting the font-size to 0. Thus the white-spaces in between the images will be 0 in width, and the images won't be affected.

Don't know if this works in all browsers, but I tried it with Chromium and some <li> elements with display: inline-block;.

Answer 2

You could use comments.

 <img src="..." alt="..."><!--
 --><img src="..." alt="..."><!--
 --><img src="..." alt="..."><!--
 --><img src="..." alt="...">

I'd worry about the semantics of having a series of images side by side though.

Answer 3

You could use CSS. Setting display:block, or float:left on the images will let you have define your own spacing and format the HTML however you want but will affect the layout in ways that might or might not be appropriate.

Otherwise you are dealing with inline content so the HTML formatting is important - as the images will effectively act like words.

Answer 4

Flexbox can easily fix this old problem:

.image-wrapper {
  display: flex;
}

More information about flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 5

You have two options without doing approximate stuff with CSS. The first option is to use javascript to remove whitespace-only children from tags. A nicer option though is to use the fact that whitespace can exist inside tags without it having a meaning. Like so:

<div id="[divContainer_Id]"
    ><img src="[image1_url]" alt="img1"
    /><img src="[image2_url]" alt="img2"
    /><img src="[image3_url]" alt="img3"
    /><img src="[image4_url]" alt="img4"
    /><img src="[image5_url]" alt="img5"
    /><img src="[image6_url]" alt="img6"
/></div>

Answer 6

After way too much research, trial and error I found a way that seems to works fine and doesn't require to manually re-set the font size manually on the children elements, allowing me to have a standardized em font size across the whole doc.

In Firefox this is fairly simple, just set word-spacing: -1em on the parent element. For some reason, Chrome ignore this (and as far as I tested, it ignores the word spacing regardless of the value). So besides this I add letter-spacing: -.31em to the parent and letter-spacing: normal to the children. This fraction of an em is the size of the space ONLY IF your em size is standardized. Firefox, in turn, ignores negative values for letter-spacing, so it won't add it to the word spacing.

I tested this on Firefox 13 (win/ubuntu, 14 on android), Google Chrome 20 (win/ubuntu), Android Browser on ICS 4.0.4 and IE 9. And I'm tempted to say this may also work on Safari, but I don't really know...

Here's a demo http://jsbin.com/acucam

Answer 7

I'm too late (i just asked a question and find thin in related section) but i think display:table-cell; is a better solution

<style>
img {display:table-cell;}
</style>

<img src="img1.gif">
<img src="img2.gif">
<img src="img3.gif">

the only problem is it will not work on IE 7 and Earlier versions but thats fixable with a hack

Answer 8

Use CSS stylesheet for solving this problem like the following code.

[divContainer_Id] img
{
    display:block;
    float:left;
    border:0;
}

alt text http://rabu4g.bay.livefilestore.com/y1pWoAOBMiLumd2iQTAreYjQCDIkHImh2g_b2g9k4AnxtDNrCjvzL6bK7skG8QKMRNWkMG7N8e5Xm7pgle3tdRJd2y08CnnoPLy/Capture.PNG

Testing on Firefox 3.5 Final!

PS. your html should like this.

<div id="[divContainer_Id]">
    <img src="[image1_url]" alt="img1" />
    <img src="[image2_url]" alt="img2" />
    <img src="[image3_url]" alt="img3" />
    <img src="[image4_url]" alt="img4" />
    <img src="[image5_url]" alt="img5" />
    <img src="[image6_url]" alt="img6" />
</div>

Answer 9

Is there anything I can do other than break in the middle of the tags rather than between them?

Not really. Since <img>s are inline elements, spaces between these elements are considered by the HTML renderer as true spaces in text – redundant spaces (and line breaks) will be truncated but single spaces will be inserted into the character data of the text element.

Positioning the <img> tags absolutely can prevent this but I'd advise against this since this would mean positioning each of the images manually to some pixel measure which can be a lot of work.

Answer 10

Another solution would be to use unconventional line breaks in places of spaces. This is similar to the first couple answers, and is an alternative way of lining up elements. It also is a super-edge-optimization technique because it replaces spaces in your markup with carriage returns.

<img
src="image1.jpg"><img
src="image2.jpg"><img
src="image3.jpg"><img
src="image4.jpg">

Note that there are no spaces in any of that code. Places where spaces are normally used in HTML are replaced with carriage returns. It's less verbose than both using comments and using whitespace like Paul de Vrieze recommended.

Credit to tech.co for this approach.

Answer 11

white-space: initial; Works for me.

Answer 12

Inspired by Quentin's answer, you can also place the closing > next to the start of the next tag.

 <img src="..." alt="..."
 /><img src="..." alt="..."
 /><img src="..." alt="..."
 /><img src="..." alt="..."/>

Answer 13

The whitespace between the elements is only put there by the HTML editor for visual formatting purposes. You can use jQuery to remove the whitespace:

$("div#MyImages").each(function () {

    var div = $(this);
    var children= div.children();
    children.detach();
    div.empty();
    div.append(children);

});

This detaches the child elements, clears any whitespace that remains before adding the child elements back again.

Unlike the other answers to this question, using this method ensures that the inherited css display and font-size values are maintained. There's also no need to use float and the cumbersome clear that is then required. Of course, you will need to be using jQuery.

Answer 14

Personally I like the accepted answer stating there is no exact way of doing this, not with out using a trick of some form.

To me, it is an annoying issue with at times can make you waste an hour wondering why a row of check boxes for example are not all aligned correctly.. Hence i had to have a quick google and myself check if there was a css rule that i have not remembered... but seems no :(

As for the next best answer, of using font-size... to me this is a nasty hack that will bite you later on wondering why your text is not showing.

I generally develop a lot with PHP and in the case of where i am generating a grid of check boxes, the PHP generated content removes this problem as it does not insert any spacing/breaks.

Simply, i would suggest either having to deal with the images all being on a single line together or using a server side script to generate the content/images.

Answer 15

Instead of using to remove a CR/LF between elements, I use the SGML processing instruction because minifiers often remove the comments, but not the XML PI. When the PHP PI is processed by PHP, it has the additional benefit of removing the PI completely along with the CR/LF in between, thus saving at least 8 bytes. You can use any arbitrary valid instruction name such as and save two bytes in X(HT)ML.

Answer 16

Lots of creative solutions here... I think everyone would agree that flex is the way to go if you are comfortable using flex for layout.

I ran into an issue recently where there was extra white space added to a list and it's anchor elements...

no white space:

<ul>
<li><a>link</a><span>icon</span></li>
</ul>

white space:

<ul>
<li>

  <a>link</a>

  <span>icon</span>

</li>
</ul>

In the application, a pseudo selector adds a bullet to each list element, but the bullet spacing is inconsistent between each list that has extra white space versus no extra white space. This creates a problem when trying to style the list content and bullet especially during text wrapping.

To fix, I displayed each li as a flex object and the white space gets removed without needing to remove it from the actual HTML. Note, you can also try using display: table; but it only works in Chrome and not Firefox.

ul li {
display: flex;
}

See code demo. Hope this helps.

ul {
  border: 1px solid gray;
  list-style: none;
  margin: .5em 0;
  padding: 1em;
  width: 140px;
}

ul li {
  margin: 5px 0 5px 15px;
}

ul li::before {
  content:"\00BB" !important;
  margin-left: -12px;
}

ul li a {
  color: #006699;
  font-size: 1em;
  font-weight: 500;
  line-height: 1.4em;
  text-decoration: underline;
}

ul.removewhitespace li {
  display: flex;
  width: min-content;
}

ul.removewhitespace li span {
  display: flex;
  flex: 0 1 100%;
  align-self: end;
  margin-left: -.1em;
}

.icon-check {
  content: "";
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-check-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z'/%3E%3C/svg%3E") no-repeat center 0;
  background-size: auto;
  background-size: 15px;
  display: inline-block;
  width: 17px;
  height: 17px;
  vertical-align: middle;
}

<ul class="removewhitespace">
<li>
&nbsp;
<a href="#">Remove whitespace in this list with flex.</a><span class="icon-check"></span></li>
</ul>

<ul>
<li>
&nbsp;
<a href="#">Leave the whitespace in this list as is.</a><span class="icon-check"></span></li>
</ul>

Answer 17

Semantically speaking, wouldn't it be best to use an ordered or unordered list and then style it appropriately using CSS?

<ul id="[UL_ID]">
    <li><img src="[image1_url]" alt="img1" /></li>
    <li><img src="[image2_url]" alt="img2" /></li>
    <li><img src="[image3_url]" alt="img3" /></li>
    <li><img src="[image4_url]" alt="img4" /></li>
    <li><img src="[image5_url]" alt="img5" /></li>
    <li><img src="[image6_url]" alt="img6" /></li>
</ul>

Using CSS, you'll be able to style this whatever way you want and remove the whitespace imbetween the books.