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

User · Answer

You could use comments     lt img src       alt       gt  lt  --  -- gt  lt img src       alt       gt  lt  --  -- gt  lt img src       alt       gt  lt  --  -- gt  lt img src       alt       gt    I d worry about the semantics of having a series of images side by side though

User · Answer

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    lt div id   divContainer Id        gt  lt img src   image1 url   alt  img1        gt  lt img src   image2 url   alt  img2        gt  lt img src   image3 url   alt  img3        gt  lt img src   image4 url   alt  img4        gt  lt img src   image5 url   alt  img5        gt  lt img src   image6 url   alt  img6    gt  lt  div gt

User · Answer

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

User · Answer

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

User · Answer

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  lt li gt  elements with display  inline-block

User · Answer

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

User · Answer

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    lt img src  image1 jpg  gt  lt img src  image2 jpg  gt  lt img src  image3 jpg  gt  lt img src  image4 jpg  gt    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

User · Answer

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    lt div id   divContainer Id   gt       lt img src   image1 url   alt  img1    gt       lt img src   image2 url   alt  img2    gt       lt img src   image3 url   alt  img3    gt       lt img src   image4 url   alt  img4    gt       lt img src   image5 url   alt  img5    gt       lt img src   image6 url   alt  img6    gt   lt  div gt

User · Answer

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   lt style gt  img  display table-cell    lt  style gt    lt img src  img1 gif  gt   lt img src  img2 gif  gt   lt img src  img3 gif  gt    the only problem is it will not work on IE 7 and Earlier versions but thats fixable with a hack

User · Answer

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

User · Answer

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

User · Answer

Semantically speaking  wouldn t it be best to use an ordered or unordered list and then style it appropriately using CSS    lt ul id   UL ID   gt       lt li gt  lt img src   image1 url   alt  img1    gt  lt  li gt       lt li gt  lt img src   image2 url   alt  img2    gt  lt  li gt       lt li gt  lt img src   image3 url   alt  img3    gt  lt  li gt       lt li gt  lt img src   image4 url   alt  img4    gt  lt  li gt       lt li gt  lt img src   image5 url   alt  img5    gt  lt  li gt       lt li gt  lt img src   image6 url   alt  img6    gt  lt  li gt   lt  ul gt    Using CSS  you ll be able to style this whatever way you want and remove the whitespace imbetween the books

User · Answer

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

User · Answer

Inspired by Quentin s answer  you can also place the closing   next to the start of the next tag     lt img src       alt          gt  lt img src       alt          gt  lt img src       alt          gt  lt img src       alt        gt

User · Answer

Is there anything I can do other than break in the middle of the tags rather than between them    Not really  Since  lt img gt 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  lt img gt  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

User · Answer

white-space  initial  Works for me

[html] Removing whitespace between HTML elements when using line breaks

Examples related to html

Examples related to css

Examples related to image