'Padding is not working in horizontal line css html

I want to add padding in my hr,

hr {
  padding-left: 200px;
  
}

but it's not working. how to add padding in my hr ?

htmlcss


Solution 1:[1]

Padding does not work in hr.

You have to use margin instead:

hr {

margin-left: 200px;

}

And it'll work.

Solution 2:[2]

Before adding padding, you should have to set a width for your hr otherwise it will display in full width.

hr:first-of-type{
    width: 100px;
    padding-left: 10px;
}
hr:last-of-type{
    width: 100px;
    padding-left: 50px;
}
<hr>
<hr>

Thanks and best regards!

Solution 3:[3]

HR is slightly different from most HTML tags in its defined behaviour, as it tries to fill up the whole width of the containing element.

The only way I know to stop it expanding over any margins is to explicitly set a width attribute

hr {
  width: 90%;
  padding-left: 200px;
}

Even then, it seems to ignore the padding, so you should use a margin instead:

hr {
  width: 90%;
  margin-left: 200px;
}

It's still kind of scrappy and imprecise. If the ruled line needs to be in line with some other element, you're probably best ensuring that they are in the same DIV, so that the ruled line can start at the left margin of the div.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Python
Solution 2 Vishal Kalansooriya
Solution 3 N Tracey

Related Questions