Why does pressing "enter" create a line break in HTML when typing?

Question

Why does pressing "enter" create a line break in HTML when typing?

Apologies in advance for what may seem like a simple CSS issue that I couldn't find an answer to on Stackoverflow. Here's the JSfiddle link: https://jsfiddle.net/kwende/fqxna79a/

In the code, you'll see two div tags:

<div id="left">Left</div><div id="right"><p>Right</p><p>Right 2</p></div>

The strange thing is that when you press ENTER between the divs in Chrome and Edge, the green and red blocks no longer align horizontally, despite no changes in CSS or markup. It's puzzling why a line break within the text document affects the rendering of the markup.

For reference:

https://i.stack.imgur.com/0E0tc.png

shows no line breaks, while

https://i.stack.imgur.com/Fj7oa.png

Update: The question seems to have been answered previously. Check out this informative resource: Here

css html

Answer 1

Answer №1

The issue doesn't lie in the actual newline itself, but rather in any whitespace that is inserted between the two div elements.

By setting them to display as inline-block, they take on characteristics of inline elements, meaning they will sit side by side if there is no space separating them.

However, as soon as white space is introduced between them, the layout system calculates that adding 20% + white space + 80% exceeds 100%, prompting the second div to move to a new line.

This behavior can be confirmed by adjusting the width of the second div to 79% while maintaining the space or newline. In this scenario, the div elements will continue to align next to each other.

Answer 2

The issue doesn't lie in the actual newline itself, but rather in any whitespace that is inserted between the two div elements.

By setting them to display as inline-block, they take on characteristics of inline elements, meaning they will sit side by side if there is no space separating them.

However, as soon as white space is introduced between them, the layout system calculates that adding 20% + white space + 80% exceeds 100%, prompting the second div to move to a new line.

This behavior can be confirmed by adjusting the width of the second div to 79% while maintaining the space or newline. In this scenario, the div elements will continue to align next to each other.

Answer 3

Answer №2

An alternative solution to using 79% is setting the font-size of the top element to 0. Here's an example of how that can be done: https://jsfiddle.net/fqxna79a/2/

body{
 font-size: 0;
}

#left, #right {
 font-size: 16px;
}

Answer 4

An alternative solution to using 79% is setting the font-size of the top element to 0. Here's an example of how that can be done: https://jsfiddle.net/fqxna79a/2/

body{
 font-size: 0;
}

#left, #right {
 font-size: 16px;
}

Why does pressing "enter" create a line break in HTML when typing?

Answer №1

Answer №2

Similar questions

Is there a different way to invoke PHP within JavaScript?

Is it possible to switch the background-image after a gif has finished loading?

The CSS transition feature does not seem to be functioning properly when it comes to displaying

Tips for creating a stylish scrollbar in a React Material-Table interface

The navigation area is too small for the social media buttons to fit

Struggling to eliminate unwanted space with CSS styling

Css flex is not compatible with Safari, iPhone 5, and some mobile web browsers' webviews

Alert: The comment index is not defined on line 5 of the comment.php file located in C:xampphtdocsindex

Extracting pictures with py Jupyter

Combine various input data and store it in a variable

Switch up the background image of the <li> element when the <a> tag is clicked

What is the process of editing a webpage to affect the display on a different webpage?

Take a snapshot of an element using fixed element positioning

CSS - ensure that two elements with display: table-row stay stacked on top of one another

Removing classes from multiple cached selectors can be achieved by using the .removeClass

What causes performance issues when utilizing mouseover events in JQuery?

Switching from jQuery to vanilla JavaScript, iterating through each HTML tag in a loop

Sas: The outcome matches the viewer results exactly

Svelte's feature prevents users from inputting on Mapbox

Having Multiple Login Forms on a Single Page