0

enter image description here

Why there is a space between two <hr> tags? When I make the width of <hr> tags, it didn't work. I made it 49%, but there is still a space between the two <hr> tag. How do I remove the space from the <hr> tags?

Here is the HTML and CSS code:

*{margin: 0;padding: 0;}
body
{background-color:#181818;color: white;}
a
{text-decoration:none;}
h1
{text-align: center;color: #3ea6ff;}
.home
{font-size: 3em;background-color: #202020;}
#night
{color: #f34601;}
#mare
{color: #3ea6ff;}
#left
{   
    display: inline-block;width: 49%;
    background-color: #f34601;height: 2px;border: 0;
}
#right
{
    display: inline-block;width: 49%;
    background-color: #3ea6ff ;height: 2px;border: 0;right: 0px;
}
<!DOCTYPE html>
<html>
<head>
    <title>Nightmare</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="nightmare.css">
</head>
<body>
    <div class="home logo">
        <h1 id="mare">
            <span id="night">Night</span>mare</h1>
    </div>
    <hr id="left">
    <hr id="right">
</body>
</html>
TheCrafters001
  • 327
  • 2
  • 15
Md.Eshfak
  • 23
  • 6

4 Answers4

3

You can use single hr with gradient background instead.

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #181818;
  color: white;
}

a {
  text-decoration: none;
}

h1 {
  text-align: center;
  color: #3ea6ff;
}

.home {
  font-size: 3em;
  background-color: #202020;
}

#night {
  color: #f34601;
}

#mare {
  color: #3ea6ff;
}

hr {
  display: inline-block;
  background: linear-gradient(to right, #f34601 50%, #3ea6ff 50%);
  height: 2px;
  width: 100%;
  border: 0;
}
<div class="home logo">
  <h1 id="mare">
    <span id="night">Night</span>mare</h1>
</div>
<hr>
doğukan
  • 23,073
  • 13
  • 57
  • 69
0

check the code. This is really a better answer (imo) occam's razor

*{margin: 0;padding: 0;}
body
{background-color:#181818;color: white;}
a
{text-decoration:none;}
h1
{text-align: center;color: #3ea6ff;}
.home
{font-size: 3em;background-color: #202020;}
#night
{color: #f34601;}
#mare
{color: #3ea6ff;}
#left
{   
    display: inline-block;width: 49%;
    background-color: #f34601;height: 2px;border: 0;
}
#right
{
    display: inline-block;width: 49%;
    background-color: #3ea6ff ;height: 2px;border: 0;right: 0px;
}
<!DOCTYPE html>
<html>
<head>
    <title>Nightmare</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="nightmare.css">
</head>
<body>
    <div class="home logo">
        <h1 id="mare">
            <span id="night">Night</span>mare</h1>
    </div>
    <hr id="left"><hr id="right">
    
            <h1> OR YOU CAN DO THIS</h1>
    <hr id="left"><!--
 --><hr id="right">
            
</body>
</html>
DCR
  • 14,737
  • 12
  • 52
  • 115
-1

Float :

Using float:left; on both of the hr's seem to work.

Flex :

I don't recommend doing this though. What I'd do is wrap the 2 hr's into a div and add display: flex; on it. And in the children I'd add flex-grow:1;

If i'm not mistaking it should grow the 2 hr's to take all the space in the div evenly. It will also work better with the rest of the page rather than using float which can sometimes mess everything up (from my own experience).

Alan Blanchet
  • 13
  • 5
  • `
    ` will take all space available by default. And using `
    ` will also put the lines next to each other by default. But this wasnt the question. So no need for either flaot or flexbox. It does nothing to the code what the code doesnt do itself.     – tacoshy Mar 27 '21 at 15:25
-2
<hr id="left">
<br>
<hr id="right">

You can put a br between the hr a br means a break. Check this link to see more https://www.w3schools.com/tags/tag_br.asp

Mauritsieee
  • 1
  • 2
  • this is not what the OP asked for. he wants the 2 `
    ` in the same line without a gap. I dont see how adding a linebreak would remove the gap. You just put bost `
    ` tags below eachother what was not intended.     – tacoshy Mar 27 '21 at 15:22