Looking to eliminate the vertical spacing of the <hr> tag?

Summary: For a quick solution, just click on the image at the bottom.

Greetings to everyone!

I am facing an issue with two <div> elements that I need to separate using a 

<hr class="separator">
element.

Below is the CSS code for the 

<hr class="separator">
element:

hr.separator {
    border-top: 1px solid black;
    margin-top: 70px;
    margin-bottom: 0;
    padding: 0;
}

And here is the CSS code for the lower 

<div class="brown">
element:

div.brown{
    margin-top: 0;
    padding-top: 70px;
    background-color: #ce9771;
}

In the HTML structure, these elements are arranged like this:

<div> upper div \<div>
<hr>
<div> bottom div \<div>

However, there seems to be a small vertical whitespace (approximately 3px) between them. I have tried setting all margins and padding to "0", experimented with making the <hr> a child of each <div>, and even adjusted the position attribute (which unfortunately resulted in the <hr> disappearing)... Can anyone provide guidance to a beginner?

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

htmlcssmarginvertical-alignmentspacing

Answer №1

Modify the appearance of a horizontal rule:

hr.separator {
    border-top: 1px solid black;
    margin-top: 70px;
    margin-bottom: 0;
    padding: 0;
}

Instead of just altering the top border, consider removing all borders and then setting the top border:

hr.separator {
    border: none;
    border-top: 1px solid black;
    margin-top: 70px;
    margin-bottom: 0;
    padding: 0;
}

div.brown{
    margin-top: 0;
    padding-top: 70px;
    background-color: #ce9771;
}
<hr class="separator">
<div class="brown">

</div>

If you encounter styling issues, inspect the computed properties using your browser's developer tools.

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

How can you apply a class to a different element by hovering over one element?

Is there a way to darken the rest of the page when a user hovers over the menu bar on my website? I've been playing around with jQuery but can't seem to get it right. Any suggestions? I'm looking to add a class '.darken' to #conte ...

javascriptjqueryhtmlcss

What is the best way to position the section and footer to the left side of the sidenav?

I am relatively new to the world of html and css, trying my hand at constructing html layouts. I have encountered a bit of trouble in aligning the footer and section to the left of the nav bar. No matter what percentage widths I use, they always end up ove ...

htmlcss

Using a gogocartojs map in your JavaScript project

I have created a new project and am attempting to integrate gogocartoJs into it. While the project itself is functioning properly, I am experiencing issues with the map not displaying as expected. Although I have followed the provided guides, there seems ...

javascripthtmlnpm

Adding information to a single class that shares a common name

Currently, I have successfully implemented a row cloning scenario where multiple dynamic rows are created after confirming an inventory number from a MySQL database. However, I am facing an issue with inserting the inventory data only to the next DIV eleme ...

javascriptjqueryhtmlajax

Step-by-step guide to importing a directory in ReactJS

Is there a way to create an input that can upload an entire directory with all its folders intact? I attempted the following code: <input ref={wrapperRef} id="file-upload" name="file-upload" type="file" ...

htmlreactjsnext.js

Can an input element be used to showcase a chosen image on the screen?

I would like to display the selected image from an input element. Can this be done with a local file, accessing the image on the client side, or do I need to upload it to a server? Here is my React code attempt: I can retrieve the correct file name from t ...

javascripthtmlreactjs

Perform a search within an iframe

Despite the fact that iframes are considered outdated, I am attempting to create a browser within an HTML browser. I have implemented a search bar that opens the typed input in a new window which searches Google. However, I would like to modify it so that ...

javascripthtmlgoogle-chromesearchbrowser

Having issues with React Nivo tooltip functionality not functioning properly on specific graphs

While using Nivo ResponsivePie to visualize some data, everything is functioning properly except for the tooltip. For some reason, the tooltip isn't appearing as it should. Interestingly, I have a heatmap and a bar graph with tooltips that are working ...

javascriptcssreactjsnivo-react

The animated image gracefully glides down the webpage accompanied by an h3

How can I align an image and h3 tag side by side without the image sliding down? <img src="..." alt="..." /><h3>Shopping Cart</h3> I need them to be next to each other but the image keeps moving down. Any suggestions on how to fix this? ...

htmlcssxhtml

Discover the name of a color using its HEX code or RGB values

Is there a way to retrieve the color name from RBG or HEX code using JavaScript or JQuery? Take for instance: Color Name RGB black #000000 white #FFFFFF red #FF0000 green #008000 ...

javascriptjquerycsscolors

use jquery to highlight a table row based on the current hour

Within my HTML structure, there is a table element with the class <table class="model">, and it contains several table data cells with the class class="model-date". The date format within these cells is as follows: DD-MM HH:MM For example, <td ...

jqueryhtmlcss

Having difficulty extracting images from a collection - web scraping struggle

I have a basic understanding of web scraping but I am facing an issue. I am using PHP Simple HTML DOM and struggling to extract images from within each 'li' tag. <ul class="slides"> <li> <img src="www.webpage.com/oH7oCOEhQAB ...

phphtmldomweb-scraping

How can I style the inner HTML text of an element without altering the style of its subelements? (CSS Selector)

I created an html structure that looks like this: <p> This is some test inside the p tag <div class="some-class"> <div class="sub-div-class"> <i title="title test" data-toggle="tooltip" class="some-icon-class" data-ori ...

htmlcssdomcss-selectorsstyles

Divs Stacked and Centered

I am currently utilizing the card components from Google's Material Design Lite HTML theme, which can be found at . At the moment, my cards are positioned next to each other and aligned to the left side of the page. I am looking to center the cards o ...

htmlcss

Developing a Form Submission Feature Using JQuery Mobile

I'm having trouble submitting a form using JQuery Mobile. Currently, my code looks like this: <form action="#pagetwo" method="post" name="myform"> <input type="text" name="myname"> <input type="submit" value="submit" /> ... and th ...

javascripthtmljquery-mobile

I'm looking to have a span and an input side by side, both spanning the full width of the containing div. How can I achieve this?

In my code snippet below: <html> <body> <div style="width: 700px;"> <span>test</span> <input style="width: 100%;"></input> </div> </body> </html> I am facing an issue where the span and input el ...

htmlcss

The Laravel error message "Attempting to access 'index()' on a null object"

After generating a model in Laravel, I attempted to migrate the table using 'php artisan migrate', but encountered an error message on the terminal: "Call to a member function index() on null" ...

phpcsshtmllaravel

Stopping videos in the JQuery Cycle Plugin triggers the stop event

Currently, I have a simple cycle set up with YouTube videos using the following code: <script type="text/javascript"> $(document).ready(function () { $('#cycle').cycle({ fx: 'fade', sp ...

javascripthtmljqueryjquery-events

Upon submission of the form, trigger an email to be sent and simultaneously open a

I need my form to simultaneously open a window and send the form data via email when submitted. <form action="" method="post" id="form" onsubmit="paymentfunc();return false;"> Submit button: <input type="submit" value="Purchase" class="btn" id= ...

phpjqueryhtmlajaxforms

What is the best way to automatically close a modal window after pressing the submit button

Having some trouble with my modal window using pure CSS. Can't seem to get it to disappear after clicking the submit button. Any suggestions on how to hide it properly? Here is the code snippet of both the HTML and CSS for reference. Open to all ideas ...

htmlcss