I originally thought that the pre(html tag) would act just like 'white-space:pre'. However, it turns out that it does not behave in the same way.
<pre>
aaa
bbb
</pre>
<p style="white-space:pre;">
aaa
bbb
</p>
The <pre> element ignores the first and last \n, while the <p> element keeps the first \n and ignores the last one. Why is this?
According to the HTML standard:
Remember: Within the HTML syntax, any leading newline character right after the starting tag of a pre element will be removed.
For more information, visit this link:
Hence, the <pre> element follows this particular rule. It appears that if other elements have a white-space:pre setting, this rule is not in effect.
Essentially, both elements are equal in terms of content display. The discrepancy in spacing that you're observing with <p> tags is due to the default behavior of adding an empty line above itself for paragraph separation. Conversely, <pre> does not incorporate this feature, resulting in no additional space.
It's important to understand the distinction between the HTML pre element and the CSS property white-space: pre. These two are separate concepts, so don't confuse them. However, if you're talking about how line breaks are rendered, that's a different story.
According to the official specifications, a line break right after an opening tag should be disregarded. Therefore,
<pre>
aaa
bbb
</pre>
should be the same as
<pre>aaa
bbb
</pre>
This rule shouldn't change even if you swap p for pre or apply some styling. But web browsers sometimes don't follow the rules, which is the case here.
Browsers handle elements differently. The key takeaway is to minimize the use of the pre element and white-space: pre. If you do use them, be aware of this behavior. If necessary, avoid starting a tag immediately with a line break, and instead insert a space before the line break (if you want an empty line at the beginning).
The <pre> element shows content in a monospace font where each character has the same width.
This makes it more readable compared to the default browser font used in
<p style="white-space:pre;">Whenever a link is clicked by the user, I would like Jinja to establish a variable known as {{ contact_clicked }} that holds the same value as {{ contact }}. I thought about using <a href="/?{% contact_clicked = contact %}">.....</a> ...
I currently have multiple CSS styles applied: form#reply_form-c1r1.odgovor div#cmtforms-c1r1 input{color:red} form#reply_form-c2r1.odgovor div#cmtforms-c2r1 input{color:red} form#reply_form-c3r1.odgovor div#cmtforms-c3r1 input{color:red} form#reply_form-c4 ...
Currently, I am experimenting with placing images of bubbles randomly on a webpage. To create the illusion of the bubble expanding in size from nothing to its full scale, I have been using CSS and specifically the transform:scale(); property. However, my ...
To clarify, my development environment is using MUI version 4.12.3. Inside file A, I have a simplified code snippet for a functional component, along with the usage of makeStyles to style a JSX element within the return statement (not displayed here). Ever ...
for ($q = 1 ; $q < 7 ; $q++ ) { echo $q ; echo $row; } While the above code functions properly, I am interested in echoing two rows as shown in the image below: https://i.stack.imgur.com/7KmUY.jpg I prefer not to use another for loop. Is there a way t ...
Looking to design a page that accommodates both login and sign up functionalities by dynamically updating the src of an iframe. In the navigation bar, there is: <li id="change"><a onclick="sign()">Sign up</a></li> And within the ...
I am having an issue with fetching data from MySQL based on Select Month and Year in HTML Select Option. When I submit the view, the table should be filtered accordingly. Otherwise, all data should be displayed. However, my code is generating an error. No ...
While working on a registration page, I encountered an issue where the entered information was not being stored in the database. Instead, an error message appeared: Notice: Undefined variable: sql in C:\xampp\htdocs\Bawazir\Untitled-1. ...
Seeking input on good and bad practices in CSS/HTML/jQuery, I recently asked a question about determining when it is appropriate to use jQuery to set container dimensions. The responses I received were helpful (view them here). Realizing that jQuery may n ...
I'm encountering an error while trying to execute a PUT request. { "error" : { "status" : 400, "message" : "Required parameter position_ms missing" } } I have consistently used the same format for all previous PUT requests, and everythi ...
I've searched through various sources, including stackoverflow.com and other websites, to solve this problem I'm encountering. Despite trying everything I found, I still can't get the text to center vertically in Firefox when styling buttons ...
Utilizing bootstrap jumptron with a background image has led to an issue where the background image disappears as I scroll down, leaving only the jumptron div class displaying the heading. How can this be fixed so that the image remains visible even when s ...
I am facing an issue with opening a Modal popup for customer details. The problem occurs when the modal opens behind a slider on the website. However, when I slide the page down, the content of the modal becomes fully visible. https://i.stack.imgur.com/wR ...
As a newcomer to web design, I am excited that my site is almost ready to go live. However, I have encountered some significant issues right before launch. When the site is zoomed in or out, the content becomes misaligned at certain zoom percentages. Add ...
Looking for a smart method to resize multiple images to fit neatly inside a fixed-size div? I've considered using JavaScript to calculate the div's width, dividing it by the number of images, and resizing them equally while maintaining their asp ...
I can't seem to get my rotating background to work using CSS keyframe animation. I've tried different things but can't figure out what's going wrong. Below is my code: .main-header { width: 100%; Height: 128px; } .main-header, ...
I have a question that is related to the topic discussed here: Making a link stay active displaying hover effect upon click using javascript. I am looking for a way to disable the active class when the same link is clicked again. Any assistance on this mat ...
Having created two radio buttons, grouped them together, and applied bootstrap classes for styling; I am encountering an issue where the values of the radio buttons are not updating when clicked and submitted. Interestingly, the checkboxes on the same form ...
Unfortunately, I am unable to share an image due to limited internet data. My goal is to switch each image to its sprite equivalent. There are three list items that I'm struggling to change because they each have two classes that need to be updated. ...
While I've seen some discussions on this topic already, the conflicting answers have left me uncertain. Is there a foolproof method for triggering file upload without using an input field? Essentially, I'd like to create a div with an icon and te ...