Padding is not working in horizontal line css html-CodePudding

I want to add padding in my hr,

hr {
  padding-left: 200px;
  
}

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

CodePudding user response：

Padding does not work in hr.

You have to use margin instead:

hr {

margin-left: 200px;

}

And it'll work.

CodePudding user response：

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!

CodePudding user response：

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.