vzsi
commented
5 months ago Me
why are the followings rendering differently:
1.
<div style="display:inline-block">
</div><div style="display:inline-block">
</div>2.
<div style="display:inline-block">
</div>
<div style="display:inline-block">
</div>ChatGPT
The difference in rendering between these two HTML snippets is related to the display: inline-block; style and how browsers handle whitespace between inline-level elements.
-
In the first case:
<div style="display:inline-block"> </div><div style="display:inline-block"> </div>The two
<div>elements withdisplay: inline-block;are placed directly next to each other without any whitespace or newline characters between them. Inline-block elements are similar to inline elements in that they are laid out in the same line, but they also respect width and height properties like block elements. Since there's no whitespace or newline between these elements, they are rendered adjacent to each other with no space in between. -
In the second case:
phpCopy code
<div style="display:inline-block"> </div> <div style="display:inline-block"> </div>Here, there is a newline character (and possibly other whitespace) between the two
<div>elements. When rendering inline or inline-block elements, most browsers treat whitespace (including newlines) in the HTML source as a single space character in the rendered output. This means that in this second case, there will be a small space between the two<div>elements, similar to the space you would see between words in a paragraph or between inline elements like<span>.
The size of this space can vary based on the font size and other styling but is typically about the same width as a single character space in the font being used. This spacing can be significant when arranging inline-block elements, especially in layouts where precise alignment is required.
It's important to note that this behavior is specific to inline-level elements (like those with display: inline; or display: inline-block;). Block-level elements (like those with display: block;) do not exhibit this behavior because they are rendered on new lines by default, and whitespace between block-level elements is generally collapsed.
wmnnd
The multi column layout breaks if the DIV-s of the two columns are separeted with a new line.
See the exampes bellow.
Following is a HTML showing different scenarios.
TSZ5.html.txt
Our institue uses Exchange SMTP to send and Outlook/OWA to read emails. Exchange and Outlook seems to be changing the HTML structure, OWA strips out comments, thus displaying improper layout.
I have no idea what's going on, this should not happen, but it does.
Tested with the same results with
Here are some different scenarios:
Broken layout
Working HTML
Also working HTML