Ways to eliminate the gap preceding <br> code

My footer contains two sections: one for the address and one for contact information. The address section is styled using <p> tags with <br/> elements inside, while the contact information section is styled using <span> elements with a display: block; attribute. Here is my HTML code:

<div class="information">
            <div class="informationAddresses">
                <p>
                    TANOBEL FOOD
                    <br>
                    PT. Sariguna Primatirta
                    <br>
                    Jl. A. Yani 41-43
                    <br>
                    Gedangan, Sidoarjo
                </p>
            </div>
            <div class="informationContact">
                <span>Call Center <a href="tel:+628001112536">0800 111 2536</a></span>
                <span>Hotline <a href="tel:+623170109110">(031) 701 09 110</a></span>
                <span>SMS <a href="tel:+6277850800033">+6277 85080 0033</a></span>
                <span><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e3809690978c8e8691a397828d8c8c81868f858c8c87cd808c8e">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="72110701061d1f17003206131c1d1...
            </div>
        </div>

I am facing an issue where there is space before a line break (<br/>) inside the <p> tag. Can this be resolved with CSS or should I consider using a different tag?

Thank you for your assistance, and please excuse any language errors.

htmlcss

Answer №1

Give this a shot:-

<span style="white-space:pre-line">

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

Is it possible to supersede the pre-set validation of the html5 input types for url and email?

When using the input type url in html5, what are the default rules for a valid URL? If a custom pattern attribute is also specified along with the type, will it override the default validation rules? For example, in the line below, will the pattern attribu ...

htmlvalidation

What is the best way to choose every single element on the webpage excluding a specific element along with all of its children?

Is there a way to hide all content on a page except for a specific element and its children using CSS? I've been exploring the :not selector, but I'm struggling to make it work with the * selector. :not(.list-app) { display: none; } :not(. ...

css

Update the appearance of buttons using AngularJS

I am trying to change the style of 3 buttons when they are clicked. I am not sure if angular has built-in functions like ng-class or ng-click that can help me achieve this. I have tried implementing them but it doesn't seem to work. <button class= ...

javascriptcssangularjsbutton

Text overlay effect on hovering an image

I am struggling to add text to a photo and make the entire photo clickable with a link. I have already applied a darkening effect that I want to keep, but now I need to insert text on top of it. It is important for me to maintain the current dimensions and ...

htmlcsshover

I encountered an AJAX error while working on my project

Encountering an error with my login_process.php when using ajax, preventing me from progressing. All files are stored in a single folder. Upon running the HTML log-in page, the error becomes visible. Below is the code snippet, quite straightforward. Previo ...

phphtmlajax

Tips for incorporating a shopping cart that seamlessly integrates with Paypal's "Add Item" feature

Hello there, I am fairly new to creating websites with HTML using Microsoft VWDE for my choir. My goal is to set up online ticket sales for our upcoming concerts. I want users to have the ability to enter the quantity of tickets they desire at various pric ...

htmlpaypal

The issue with grunt-contrib-compass not functioning properly within npm

I recently installed npm and grunt, followed by installing grunt-contrib-compass. However, when I try to run grunt, I encounter the following error: Running “compass:dist” (compass) task Warning: not found: compass Use –force to continue. Aborted du ...

csssassnpmgruntjscompass

The scripts do not allow the image to be resized

Struggling to resize an image while implementing a hover effect with css and javascript. The code I have so far is: HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equ ...

javascripthtmlcssthree.jsgsap

Ways to avoid overlapping between bootstrap columns

Currently, I am honing my skills in Bootstrap by creating a simple example with 3 columns of varying sizes: 2, 8, and 2. However, I have noticed that on certain screen sizes, the contents within these columns overlap each other. My goal is to prevent this ...

htmlcsstwitter-bootstrap

What is an alternative method for creating a horizontal line without the need for the <hr> tag?

Is there a way to create a slim horizontal line without using the <hr> tag ? This is what I attempted: .horizontal-line{ border-top: 1px solid #9E9E9E; border-bottom: 1px solid #9E9E9E; } While it does function, I am hoping for a thinner line. ...

javascripthtmlcsstagsvisual-web-developer-2010

Anticipated the presence of a corresponding <tr> in the <table> within the server HTML, but encountered hydration failure due to discrepancies between the initial UI and the server-rendered content

Next.js Version 13.2.3 In Next.js, it is advised not to use the table element. "use client"; export default function index() { return ( <table> <tr> <th>Company</th> ...

htmlreactjsnext.jshtml-tableserver-side-rendering

Angular: Unable to retrieve defined data when loading a component

There is a nagging question in my mind that I hesitate to ask because deep down, I know the answer is probably staring me in the face. After struggling with code for two days straight, I am on the brink of pulling my hair out. Although I am relatively new ...

htmljsonangulartypescriptangular6

Web application using HTML5, AJAX, and a manifest file for offline usage

Looking for help with an issue on my website: Currently trying to put it offline. Using the manifest file: Encountering an issue with the left and right arrow navigation while offline. The browser shows an xmlhttprequest error, similar to the one found ...

jqueryxmlajaxhtmlmanifest

JavaScript function that hides buttons when certain text appears

I created a function called hideButtons that hides buttons when certain text is found in the paragraph. The paragraph contains a list of names that the user either likes or dislikes, and once all names have been displayed, the buttons disappear. Currently ...

javascripthtml

Arrange the navbar on top of the following section

I'm seeking a solution that will achieve the desired outcome without using position: fixed on the navbar, as shown in the following image (I want it to disappear when scrolling down): https://i.sstatic.net/lFW0w.png The image serves as the backgroun ...

cssbootstrap-4css-position

Creating a webpage that seamlessly scrolls and dynamically loads elements

Currently, I am working on a dynamic website that loads new elements as you scroll down the page. Here is an example of the HTML code: <div>some elements here</div> <div id="page2"></div> And this is the JavaScript code: var dis ...

javascripthtmlcss

Is it possible to set up a rotation percentage for a specific item?

As shown in the GIF below, when adjusting the window size, the image on the left grows and shrinks as intended. To achieve this effect, I placed a line inside the "image wrapper" that aligns with the text block on the right. Currently, the line is position ...

javascripthtmlcss

Is there a way to style CSS Content to appear both italicized and bold?

As I work on my project, I am aiming to style the CSS content class in both italic and bold formats. Take a look at the code snippet below. div::before { content: "text"; color:black; } <div></div> My goal is to achieve this exclu ...

css

Creating an event on the containing element

Here is my HTML tag: <ul> <li> <form>...</form> <div> <div class="A"></div> <div class="B"><img class="wantToShow"></div> </div> ...

javascriptjqueryhtml

What is the most optimal method for incorporating inline SVG into your code?

As I work on my webpage, I face the challenge of including numerous SVG icons in the HTML. To avoid slowing down the page with additional HTTP requests, I have decided to embed the SVG code directly like this: <svg xmlns="http://www.w3.org/2000/svg" wi ...

htmlsvg