Padding is not working in horizontal line css html

user_19136007 0
Viewed 164

I want to add padding in my hr,

hr {
  padding-left: 200px;
  
}

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

css html
3 Answers

Padding does not work in hr.

You have to use margin instead:

hr {

margin-left: 200px;

}

And it'll work.

user_186206250

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!

user_177676190

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.

user_74807080
Related