Removing spaces between HTML elements when using line breaks

Question

I have a page with a line of about 10 img s. For readability of HTML, I want to put a line break between each img tag, but it makes spaces between images that I don't want. Is there anything I can do except a break in the middle of the tags, and not between them?

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

Answer 1

You can use CSS. Display preferences: block or float: on the left of the images you can define your own spacing and format the HTML as you want, but affect the layout in a way that may or may not be appropriate.

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

Answer 2

Sorry if it is old, but I found a solution.

Try setting the font-size to 0. This way the spaces between the images will have a width of 0 and the images will not be affected.

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

Answer 3

You can use comments.

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

I would take care of the semantics of what will be next to a series of images.

Answer 4

You have two options without using rough CSS material. The first option is to use javascript to remove children from tags. A nicer option is to use the fact that spaces can exist inside tags without meaning. For example:

 <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 5

After too much research, trial and error, I found a way that seems to work fine and does not require manually setting the font size on the child elements, allowing me to have a standardized em font size in the entire document.

In Firefox, it's pretty simple, just set word-spacing: -1em to the parent element. For some reason, Chrome ignores this (and, as far as I checked, it ignores word spacing regardless of value). Thus, in addition to this, I add letter-spacing: -.31em parent and letter-spacing: normal to the children. This share of em is the space size ONLY IF your em size is standardized . Firefox, in turn, ignores negative values ​​for line spacing, so it will not add it to 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 am tempted to say that this can also work on Safari but I really don't know ...

Here is the demo http://jsbin.com/acucam

Answer 6

I'm too late (I just asked a question and found a thin one in the related section), but I think that display: table-cell; - The best decision

 <style> img {display:table-cell;} </style> <img src="img1.gif"> <img src="img2.gif"> <img src="img3.gif"> 

The only problem is that it will not work on IE 7 and earlier, but this fix with hack

Answer 7

Use a CSS stylesheet to solve this problem, such as the following code.

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

alt text http://rabu4g.bay.livefilestore.com/y1pWoAOBMiLumd2iQTAreYjQCDIkHImh2g_b2g9k4AnxtDNrCjvzL6bK7skG8QKMRNWkMG7N8e5Xm7pgle3tdRJd2y08nuren

Testing in Firefox 3.5 Final!

PS. your html should like it.

 <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 8

Is there anything I can do except a break in the middle of the tags, and not between them?

Not really. Since <img> are inline elements, the spaces between these elements are viewed by the HTML visualizer as true spaces in the text - excess spaces (and line breaks) will be truncated, but separate spaces will be inserted into the character data of the text element.

Positioning the <img> tags can absolutely hinder this, but I would advise doing so, as that would mean manually positioning each image with some pixel measure, which can be a lot of work.

Answer 9

Flexbox can easily fix this old problem:

 .image-wrapper { display: flex; } 

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

Answer 10

Another solution would be to use non-traditional line breaks in space spaces. This is similar to the answers of the first pair, and this is an alternative way of arranging elements. This is also a super-edge optimization method, as 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"> 

Please note that there are no spaces in any of these codes. Places where HTML spaces are commonly used are replaced with carriage returns. It is less verbose than using comments and using spaces, as recommended by Paul de Vrieux.

Credit tech.co for this approach.

Answer 11

The space between the elements is placed only in the HTML editor for visual formatting. You can use jQuery to remove spaces:

 $("div#MyImages").each(function () { var div = $(this); var children= div.children(); children.detach(); div.empty(); div.append(children); }); 

This separates the children, clears the spaces left before adding the children back.

Unlike other answers to this question, using this method ensures that the inherited values ​​of css display and font-size preserved. There is also no need to use float and bulky clear , which is then required. Of course you will need to use jQuery.

Answer 12

Personally, I like the accepted answer, in which there is no exact way to do this, and not using a form trick.

For me, this is an annoying problem, because of which from time to time you can spend an hour trying to figure out why a number of checkboxes, for example, are not all aligned correctly. Therefore, I had to quickly and quickly check if there is a css rule that I did not remember ... but it seems not :(

As for the next best answer, using font-size ... for me, this is an unpleasant hack that will later bite you, wondering why your text is not displayed.

I usually develop a lot with PHP, and in the case when I create a grid of flags, the generated PHP content removes this problem, since it does not insert any intervals / breaks.

I just suggest either dealing with images that are on the same line together, or using the server side of the script to create content / images.

Answer 13

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

Answer 14

white space: initial; It works for me.

Answer 15

Semantically speaking, would it not be better to use an ordered or unordered list, and then use it correctly with 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 can style it the way you want and remove spaces between books.