0

I have some div tags and in between I have hr tags. There's automatically space between them. I want to reduce it. Please refer the image link below.

[The space pointed by arrow is what I want to reduce] Also tell me if there's a better way to add lines in below situation

https://i.stack.imgur.com/OSQlP.jpg

Amulya K Murthy
  • 130
  • 1
  • 2
  • 15
user12204773
  • 31
  • 2
  • 3
    Probably resolved via a change to the line-height. But post a [mcve] please – j08691 Oct 15 '19 at 14:07
  • Please post your HTML for that section. – disinfor Oct 15 '19 at 14:07
  • You may add `margin:0; line-height:0;` (or values which suits you best) to reduce vertical space occupied by hr. – Sergiy T. Oct 15 '19 at 14:08
  • do you actually need `hr`s? could you not just use a border on a div? But to answer your question, check to see if the `hr` has top and bottom margin - may be what is causing the spacing – Pete Oct 15 '19 at 14:10
  • Try to change the line-height of Text div. – Pratik Malvi Oct 15 '19 at 14:17
  • 2
    Please always provide the code and the solutions which you tried. Also, search answers the similar kind of previous questions for example https://stackoverflow.com/questions/18508442/remove-whitespace-between-div-element – Pankaj Saboo Oct 15 '19 at 14:18

1 Answers1

1

You could reduce the line height or default padding like this:

<div><h1>Text</h1></div>
<hr>
<div><h1>Text</h1></div>

h1,hr{
  line-height: 0;
}

Line height w3schools

Judg Smith
  • 44
  • 5