Contrasting Indented HTML versus Inlined HTML

I am currently in the process of updating a client's website and I have encountered issues with HTML rendering.

In the original code, all "a" and "img" tags are placed on a single line, resulting in what is known as INLINE IMG:

<div id="inside-img">
    <div class="img" style="width:8643px"><a href=""><img src=""/></a><a href=""><img src=""/></a>... ...</div>
</div>

Upon rewriting the code with better indentation, resulting in what I refer to as INDENTED IMG:

<div id="inside-img">
    <div class="img" style="">
        <a href=""><img src=""/></a>
        <a href=""><img src=""/></a>
        ...
   </div>
</div>

However, the HTML output becomes distorted, as seen in the image I have provided.

Even though I have properly indented the HTML code, the styling seems to be affected. One major issue is that the last image shifts down instead of remaining at the end of the timeline. It is puzzling as to why this change occurs when I simply adjust the indentation of the HTML.

https://i.sstatic.net/6AVVR.jpg

htmlcssrenderinlineindentation

Answer №1

There appears to be an issue related to elements set as inline-block, which can result in unwanted whitespace. Although the OP has not provided any CSS code with the markup, the following solution should resolve the problem:

<div id="inside-img">
    <div class="img" style="font-size:0;">
        <a href=""><img src=""/></a>
        <a href=""><img src=""/></a>
        ...
   </div>
</div>

Alternatively, you can also try this method (pay attention to the additional comments):

<div id="inside-img">
    <div class="img" style="">
        <a href=""><img src=""/></a><!--
        --><a href=""><img src=""/></a><!--
        -->...
   </div>
</div>

For more details on this issue, you can refer to https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer №2

The reason for this occurrence is the presence of white space between elements with the inline property in HTML. When there is white space between inline items, it becomes visible on the screen. Since images are considered inline elements, the first code example does not have any space between the HTML tags. However, in the second code example, there is a new line between them, which will be displayed as a character (i.e., a space) in the HTML.

One possible solution to this issue is to apply the CSS rule font-size: 0; to the parent div.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm having trouble with using setInterval() or the increment operator (i+=) while drawing on a canvas in Javascript. Can anyone help me out? I'm new

I am looking to create an animation where a square's stroke is drawn starting from the clicked position on a canvas. Currently, I am facing an issue where the values of variables p & q are not updating as expected when drawing the square at the click ...

javascripthtmlcanvassetintervalincrement

The Angular (click) event requires two clicks in order to trigger the associated Typescript function

I'm facing an issue with a Typescript function that I've linked to (click) in my HTML. Oddly, I have to click the button twice for the function to be executed. Interestingly, if I don't provide any parameters, the function works as expected ...

javascripthtmlangulartypescript

What's the best way to shrink the size of a hyperlink without affecting the height of the text alignment?

I am currently designing a straightforward menu layout similar to this <div className="main-menu"> <ul> <li className="main-menu__app-menu"><a href="#">link 1</a></li> ...

htmlcsssass

How to use jQuery to maintain an image at the top of a div

Within my HTML, there is a primary root div element containing an image. <div id="root"> <img id="msg"/> </div> Using jQuery, I am able to prepend multiple div elements inside the main root div. However, the problem arises when these ...

javascriptjqueryhtml

Modify the height using JavaScript and then revert back to the initial CSS height

Looking for assistance with a JavaScript issue that I'm currently facing. Q1: Javascript Function to Return Image Height and Margin My website layout consists of a horizontal scroll of smaller images arranged in a grid, each with different height pe ...

javascriptjqueryhtmlcssheight

The depth order of overlapping elements and the rotation effect achieved through

I have created some interactive flip cards using CSS and HTML with transitions Currently, when you hover over a card, it flips and enlarges. However, I am facing an issue with positioning the hovered card on top using z-index and relative position due to ...

htmlcsscss-transitions

The icons within the <i> tag are failing to appear on my Ionic webpage

Trying to incorporate the tag icon in the HTML, but encountering issues with displaying the icon. Here is the code snippet I am using to display the icon, but unfortunately it's not appearing: <i class="fas fa-plus"></i> Intere ...

htmlangularionic-frameworksvgicons

The hover effect flickers in Firefox, but remains stable in Google Chrome

Here is an example link to check out: I am facing a dilemma on how to solve this issue and unsure if it is related to jQuery or the DOM structure. If you have any suggestions, they would be greatly appreciated. Thank you! ...

jquerycsshtml

Display XML elements on hover with a Bootstrap tooltip

I am attempting to showcase an XML snippet in my title attribute, similar to the example below. I understand that removing data-html="true" or changing it to false will resolve the issue. However, I also require a label in my title resembling the <stro ...

jqueryhtmlcsstwitter-bootstrap-3twitter-bootstrap-tooltip

Position the navigation bar with Absolute and Sticky positioning for easy access and fixed

I'm in the process of creating a navigation bar that overlaps my header and remains fixed at the top of the page when scrolling. Initially, it will be positioned at top: 45px and then switch to top: 0 upon scrolling. My initial approach involved se ...

javascripthtmlcsscss-positionsticky

elements within the adaptable grid structure

I'm experimenting with the Responsive Grid System for the first time and encountering difficulties getting my columns to display side by side. I have a two column grid setup for some design elements and centered content for others. Below is the relev ...

htmlcssgrid

Modify an element upon clicking the mouse on an image

I am looking to dynamically change the paragraph element with className="details" to an editable input field when a user clicks on the image with className="edit-icon" within the same grid container. How can I achieve this functionality ...

javascripthtmlreactjsmaterial-ui

Interactive section for user input

I am looking to add a commenting feature to my website that allows for dynamic editing. Essentially, I want users to be able to click on an "Edit" span next to a comment and have it transform into an editable textarea. Once the user makes their changes and ...

javascriptjqueryhtml

Loading identical items using jQuery Ajax

I have a situation where an ajax request is returning multiple URLs which I am using to create images like: <img URL="1" /> <img URL="1" /> <img URL="2" /> <img URL="1" /> <img URL="3" /> <img URL="2" /> and so on... ...

javascriptjqueryhtmlajax

Utilize/Absolve/Add a Prefix to angular material scss styles

Issue I am facing a challenge with integrating angular material SCSS into my application. I want to ensure that these styles are isolated and scoped specifically for my application, as it will be embedded within a larger monolith. The goal is to prevent a ...

cssangularsassangular-material

View the Outcome of the Latest Form Submission on a Fresh Page

I have created a form that stores input values in a database table. Now, I want to display these results on another page once the form is submitted. However, I am struggling with how to retrieve and display all the values from the database record on the ne ...

phphtmlmysqlforms

What steps should I take to incorporate Google AdSense advertisements onto my website?

After developing a website using HTML and PHP, I attempted to incorporate Adsense ads. However, upon inserting the ad code between the body tags, the ads failed to display on the site. How can I resolve this issue? ...

htmladsadsense

When hovering over .nav-item, the nav-link color remains unchanged

Is there a way to modify the code below to change the color of a navbar item to red when it is hovered over? .nav-item.active .nav-link{ color: blue !important; } .nav-item.hover .nav-link{ color: red !important; } ...

cssbootstrap-4navbar

The fixed position seems to be malfunctioning and behaving more like absolute

I have a simple question. I am currently designing a mobile version of a page, and we are trying to keep the "snag it" yellow button fixed at the bottom. However, the 'position: fixed' property is not working as expected; it's behaving like ...

css

Unable to implement active class on parent li tab when child li is clicked

<div class="header_nav"> <ul id="navigation"> <li class="dropdown"><a href="#" rel="external">mainTab1</a> <ul class="sub_navigation"> ...

jqueryhtmlcss