Anomalous spacing when using floats and text alignments

My company name is aligned to the left and my email to the right, with the email section styled as follows:

<div style="color: white; float: right; padding-right: 10px; text-align:right">
    <p style="font-size: 16px;">E-mail</p>
    <p style="font-size: 20px; text-decoration: none;"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="563833212224333832263e392239312437263e2f646516313b373f3a7835393b">[email protected]</a></p>
</div>

Since I'm unable to add images, describing this may be challenging. There appears to be a vertical gap (the height of the company name) between the word "Email" and the actual email address.

Below is the relevant HTML code snippet:

<div style="margin: 0 auto; overflow: auto;">
    <div style="background: #000; height: 80px; width: 100%; overflow: hidden;">
        <h1 style="font-family: Snell Roundhand, cursive; padding-left: 10px; color: white; float: left;">New Trend Photography</h1>
        <div style="color: white; float: right; padding-right: 10px; text-align:right">
            <p style="font-size: 16px;">E-mail</p>
            <p style="font-size: 20px; text-decoration: none;"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="610f04161513040f0511090e150e061300110918535221060c00080d4f020e0c">[email protected]</a></p>
        </div>      
    </div>
</div>
htmlcssalignmentspacebreak

Answer №1

The reason for this space is due to the margin and padding of the p element.

To fix it, you can use:

div p {
  margin: 0;
  padding: 0;
}

If you only want to remove the gap between email and my actual email:

Then you should use:

div p {
  margin: 0;
  padding: 0;
}

div p:first-child {
  margin-top: 20px;
}

See the Demo Here

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

Changing base 64 into Mp3 audio format using PHP

I currently have an "audio" tag with a script (which is essentially a plugin) that receives and saves it as base64. This functionality is working properly. My goal now is to modify the script in order to send the base64 data to the server, convert it to m ...

phpjqueryhtml

NodeJS instructs open(html) to execute first before any other code is executed

I am evaluating whether nodeJS is a suitable solution for a project I am working on during my internship. To summarize: I need the basicNode.js file to wait until the open('./basic.html') command has completely opened the browser and loaded its c ...

javascripthtmlnode.js

JQuery Menu with Broken UL Formatting on Windows versions of IE and Firefox

Hey there! I've been struggling with a menu design that works perfectly on Mac browsers but is completely broken on Windows. I've spent hours trying to fix it and would really appreciate if a kind programmer could take a look and help me out. The ...

javascriptjquerycsshtml-lists

Using HTML and CSS to capture user input data and store it in an array

I've created a form that allows users to add and remove multiple fields, ranging from one to three. My goal is to retrieve the form data and store it in an array. index.html <!DOCTYPE html> <html lang="en"> <head> ...

javascripthtmlcss

Enhancing navbar with a dropdown menu in CSS

Is there a way to add a dropdown menu to my navigation bar and make it visible when hovered over? Any help or support would be greatly appreciated. Here is the code I have on JSFiddle: http://jsfiddle.net/nbh2e15y/2/ The CSS: #nav { background: none ...

csslistmenuhtml-lists

Ensure consistent height for all flex columns in Bootstrap 4

Is there a way to use flex classes in the example below to ensure columns 3 and 4 have the same height as columns 1 and 2 without using Javascript? Specifically, how can I adjust the height of all columns automatically to match the tallest column's c ...

htmlcssbootstrap-4

Include a clickable jQuery icon in an HTML document for testing purposes

Is there a way to include an icon [+] at the end of this statement, so that when clicked it triggers an alert? <div id="catalog" style="width: 518px;"> <ul id="catalog111" style="left: -37px;top: -140px;width=500%;"> < ...

jqueryhtml

What is the best way to create a loop that is constantly changing?

Below is a PHP array that I am working with: echo "<pre>"; print_r($notifications); /* output: Array ( [0] => Array ( [score] => 120 [type] => 5 [post_id] => 1 [subject] => ...

phphtmlarrays

Unlock the Secrets of Soundcloud: Practical Steps to Implementing the Soundcloud API in Real Life

I attempted to publish the exact .html and .js codes on the internet and host them on my own server. I am aiming to duplicate this particular example: You can check out my code at www[dot]whatsgucci[dot]com/cloudstalk.html Here is the code I utilized: ...

javascripthtmlcsssoundcloud

Encountering insurmountable obstacles in accessing AliExpress

I'm looking to extract specific information from aliexpress using scrapy and selenium. However, I've encountered an issue where the HTML code appears differently when inspecting with Chrome compared to viewing the source. It seems that the conte ...

pythonhtmlscrapyaliexpress

Action of Submit Button Based on Field Matching Another Form

I currently have a single page that contains two forms, with only one form being displayed at the moment. The concept is that if the user selects a specific state from the drop-down menu and clicks on the submit button, they will be redirected to either a ...

javascriptphpjqueryhtmlforms

Retrieve the value of a PHP array within a for loop and transfer it to JQuery

*edited format I came across a PHP code for a calendar on the internet and I am currently working on implementing an onclick event that captures the date selected by a user as a variable (which will be used later in a database query). At this point, my g ...

phpjquerycssarrays

Finding a specific child element using WebDriver

After encountering a particular issue with my HTML code structure, I found myself in a bit of a conundrum. The HTML consists of multiple divs, each containing the same set of tags but with different text within the h3 tag. My goal was to locate and interac ...

javahtmlseleniumselenium-webdriverautomated-tests

The HTML select element - Styling the selected item using the option font

Currently, I am working on adding a font dropdown list to a web page. Each option in the dropdown list is styled with the corresponding font it represents like this:- <option value="Arial, Helvetica, sans-serif" style="font-family: Arial,Helvetica,sans ...

htmlcssuser-interface

Configuring Google Maps API (including charts) for maximum height of 100%

I am having trouble getting my map to display at 100% height using the Google Maps API. I've encountered similar issues in the past with the Google Charts API as well. From what I've gathered, it seems like setting the height of the html and bod ...

javascripthtmlcssgoogle-mapsgoogle-maps-api-3

Does the Bootstrap 4 flex system allow for arranging self-row items within a parent column?

Displayed below is the navbar code snippet: <div class="d-flex flex-column flex-lg-row"> ...... </div> As shown in the example: .bd-highlight { background-color: rgba(86,61,124,.15); border: 1px solid rgba(86,61,124,.15); } < ...

twitter-bootstrapcssflexboxbootstrap-4

When a user clicks on an anchor tag, the corresponding value of the checked item is then returned

I have 3 sets of radio buttons. When a specific anchor with the "round" class is clicked, two actions should occur: The associated set of radio buttons needs to become visible The value of the checked input for that element should be returned. I am ...

javascripthtmlinputradio-button

difficulty with content insertion in asp/css/html

Hi everyone, I seem to be experiencing an issue with my content placeholder: Even though my content is supposed to be inside the placeholder in my ASP code, it appears outside: <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"& ...

c#asp.nethtmlcss

Download an image file using JavaScript and HTML from a specified image URL

As someone who is new to JS and HTML, I am currently working on a project involving the creation of pie charts using Google Charts through an HTML API. I've successfully generated the chart and obtained the image URL. However, when I use window.open( ...

javascripthtml

Ways to align Material-UI component side by side

My MenuList and Grid components are currently stacked vertically, but I need them to be aligned horizontally. I'm wondering why the Grid is nested within a div in the rendered HTML code. How can I make these components behave more like floating HTML e ...

htmlmaterial-ui