What is the reason behind CSS causing a line break when using display: none or float?

When the div tag is used, it creates a new line before and after itself.

This

display: none

makes the div invisible and does not occupy any space.

However, I am confused by something when I look at the source code:

<p>There is<div style="display:none"></div> a paragraph</p>

I expected the result to be:

There is a paragraph

But in reality, it appears as:

There is 
a paragraph

Why did this happen?

And when using float, I encounter a similar issue, for example:

<p>this is a paragraph <div style="float:left; background:blue;">something..</div>  within a div</p>

The expected output was:

something... this is a paragraph within a div

But in reality, it displays as:

this is a paragraph
something... within a div

Answer №1

As per the W3C HTML4 guidelines, it is stated that p elements cannot contain any block-level elements, including another p.

The P element is meant to represent a paragraph and should not include any block-level elements, even the P element itself.

This rule applies to all block-level elements displayed as inline or inline-block, which still retain their block-level nature within a p.

An interesting insight on this restriction can be found in the W3C HTML5 specifications

It is important to understand that a paragraph, in HTML terms, is more of a structural than a logical concept. An illustrative example highlights this dimension by defining five separate paragraphs within a given context: one before a list, one for each bullet point, and one after the list.

In cases where authors want to style such "logical" paragraphs consisting of multiple "structural" paragraphs, opting for the div element instead of the p element could be a more convenient approach.

Answer №2

<p> tags are automatically closed before the next block-level element.

When you use your browser's developer tools to examine the DOM, you may notice something similar to this:

<p>There is</p>
<div style="display:none"></div> 
a paragraph
<p></p>

Even if the block-level element (<div>) is set to not display, it doesn't alter the behavior.

Answer №3

  • Paragraphs do not necessarily require an end tag.
  • A div element cannot be nested inside a paragraph.

This is how your code looks:

<p>

Beginning of the paragraph

There is

Some text

<div style="display:none"></div>

End of paragraph, start and end of div

 a paragraph

More text

 </p>

Closing tag for an element that was never opened.


The first paragraph creates a block, resulting in line breaks before and after it.

The following text does not belong to this block, appearing on a new line instead.

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

Adjusting the Height of Highcharts Funnel Segments to a Specific Measurement

My current funnel setup looks like this: $(function () { var dataEx = [ ['1 Visit', 352000], ['2 Visits', 88000], ['3+ Visits', 42000] ], l ...

How can I repeatedly trigger an eventListener in JavaScript?

I'm currently facing an issue with calling the event listener for all 4 progress bars on my page. The problem is that it's only working on the first progress bar. I cloned the div with the id of 'mycontainer' using a for loop, but the e ...

The element's width set to 100% is not functioning properly when used within a container

Struggling to create a full-width image header but the image always ends up being the width of the container, not 100%. Tried various solutions without success, and the suggested answer here did not solve the issue. Modifying the .container width in custom ...

"Strategies for using Selenium in Python to simulate clicks without relying on class, id, or name attributes

I am currently attempting to locate the "X" button and click on it, but I am struggling to find a way to do so. Below is the HTML code for the element: <div style="cursor: pointer; float:right; border-radius: 3px; background-color: red; font-size: ...

Display content below each item in the Bootstrap List Group

Currently, I am implementing the tabs using the Bootstrap list group component. When a list group item is clicked, the appropriate tab pane is displayed. By default, it appears in the adjacent column: <html> <head> <script src="https://cd ...

Reviewing code for a simple form and box using HTML5 and CSS3

I have developed a compact form as part of a larger webpage, proceeding step by step according to the specified requirements. I am wondering if there could have been a more efficient way to code this. Perhaps streamlining the code or utilizing different c ...

AngularJS function for comparing operators

Just starting out with AngularJS and I've been given a small task to solve by my employer. Having some trouble with it, so hoping someone can lend a hand. The task involves using comparison operators in ng-options along with a number field to filter ...

One way to restrict user input to only minutes in the time input field

Is there a way to implement time control that only accepts time values? For example, when entering 00:15, it automatically converts to 00 to 12. Can we ensure that only time formats are accepted? Alternatively, can we use input type="text" and re ...

Differentiating between the simple and luxurious text editing features available in the TinyMce editor

I am currently utilizing the TinyMCE editor to enhance the appearance of a textarea field where users can input comments. My goal is to offer two options for users: one for plain text and the other for a rich text editing experience. When a user selects th ...

Tips for closing a modal in JavaScript after submitting the form

As I try to learn JavaScript, I'm creating my Quiz game and encountering an issue with a modal window. After entering my nickname and pushing Submit, I want to save the nickname in localStorage and close the modal window. However, the problem is that ...

The jquery ajax user login form is malfunctioning and failing to redirect to the intended page

I am having trouble creating a login form using jQuery AJAX to retrieve user details from the "reg" table in the database. The form doesn't seem to be working as expected, and I want the user to be redirected to another page called menu.php after logg ...

Tags are used to display HTML content

I am attempting to showcase content that has been formatted using HTML. However, it is being displayed with the HTML tags instead of formatting properly. All I do is retrieve the content from the database and insert it into a <div>. Below is an im ...

Add a button that allows users to input their information into an array, and then display the data from the array in a <div>

I'm new to the coding world, so please bear with me if I miss any unspoken rules. I welcome any feedback. Essentially, I have three text input fields: Name:, Age:, and Password:. If any of these fields are left empty, an error message will display. H ...

Can Rvest be used to extract data from an HTML node while excluding child classes?

I need assistance with extracting data from a specific URL (https://forums.vwvortex.com/showthread.php?8829402-Atlas-V6-Oil-Change-Routine). The posts on this page contain replies that start with "Originally Posted by ...". I want to scrape all the content ...

Preventing Other Devices from Establishing Connections

My goal is to restrict access to my website so that only mobile devices can enter. I have the ability to utilize node.js, HTML, and PHP in my website development. How can I go about blocking connections from other devices? ...

Tips for confirming that the text in a particular element is visible on the page when utilizing Selenium IDE

I'm stuck on a question that I can't figure out. Could someone help me locate the current element displayed below: <td style="width: 250; text-align:right" class="stData"> March 14 2014, 00:00 </td> that specifically includes the t ...

Unable to update innerHTML of asp.net literal tag using JavaScript

Here is a snippet of my JavaScript code: <script type="text/javascript">function CountCharacters(idTxtBox, idCharCount) { var maxLimit = 500; var remainingChars = maxLimit - document.getElementById(idTxtBox).value.length; do ...

What benefits does utilizing jade or another template in node.js bring?

What are the benefits of using jade or other templates in node.js (express.js) instead of just sending HTML files with the send method? And what exactly does it mean to render HTML? ...

Text exceeding boundaries within a horizontal flexbox (accordion)

Need help with a flexbox (accordion) issue. The demo below showcases multiple groups of content, each contained within a cell in a horizontal flexbox. However, when the content within a group is extensive, it overflows the flexbox causing display problems. ...

How can we minimize spam through our contact form?

I am seeking a way to include a basic Contact form on my website for easy customer communication. <form> NAME <input type='text' name='name' /> EMAIL <input type='text' name='email' /& ...