![]() For more HTML articles see HTML in the index.Wrap in a div and set the text size of the div to zero with font-size:0.Style with float:left, then clear:left on the next element.Comment out the end of line marker (carriage return).Put the closing bracket of the previous element immediately before the next element on the next line.Put all the elements on one line with no spaces between them.To remove the unwanted space between images or similar HTML elements do one of the following: See the problem and solution in action on the Spaces Between Images Demo HTML page. ![]() Remember no other text in the div is seen either. This can be done by wrapping the images in a div: If you do this you may need to add clear:left if you have following elements: Text Reduce Text Size to Zeroīecause the gap between the images is the space character setting the font size to zero in the images container also works. This will also remove the default descender spacing. You can use Cascading Style Sheets (CSS) to add float:left to the images: Us the comment tags to blank out the whitespace: Īgain some do not like the way it looks. It is also difficult to achieve with visual editors which tend to reformat the HTML entered by hand. Some find it ugly or do not like to split the line between brackets. This is easy if you can remember to do it while entering the HTML. The closing bracket for the first image's mark-up is moved to the line of the next image element: However, that can make our HTML source code difficult to read when you have many images or long src strings. The simplest solution is to have the image elements on one line with nothing between the closing angle bracket of one image element and the opening angle bracket of the next, like this: There are several simple solutions to remove the whitespace, lets start with the most obvious. This added a carriage return to the file, which gets turned into the single space. You can try it out on a Live DOM Viewer and read more about it here:įor our example page we put the two image elements on separate lines. Although the full whitespace handling rules are complex, in most cases it is simply that any combination and any number of spaces, tabs, carriage returns and line feeds are reduced to a single space. The space is due to the way that HTML is designed to handle whitespace. The above code produces this web page that clearly shows a gap between the two images: This is some basic code for a web page with two images: For tips on copying code from the Tek Eye tutorials see Copying Code from the Articles. How to Remove Small Spaces Between Images on a Web PageĪ web page can be created in a simple text editor program, on a Windows PC the Notepad program under Accessories can be used, or better still a program like Notepad++, which provides color coding to help with the editing process. It is easy to fix and you can use this article as a tutorial since example code is given. ![]() This article deals with removing the small strips of space that can appear between two pictures placed onto a web page.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |