How to add width to a HR css code?

[born2run]

Hi so I have the following CSS code for a HR tag:

hr.head {
 display: block;
 border: none;
 padding: 0;
 max-width: 1290px;
 background: #000000;
 color: #000000;
 margin: 5px auto 4px;
 height: 3px;
 line-height: normal;
 overflow: hidden;
}

The HTML code is:

<hr class="head">

I want to add a width element to the CSS code above. I need gaps on the left and right which I have already with margin as seen above. How then I specify width? Percentage? If so, how much? Some help would be appreciated. Thanks!

[lucy24]

Gosh. Do people still use <hr>? I’ve been trying to weed mine out for years.

Yes, percentage is the best way to express width, since it’s viewport-independent. Since you’ve already specified left and right margins as “auto”, it will be centered, which is generally what one wants.

I suspect at least half of your existing CSS is unneeded, since it expresses things that are default for <hr> anyway.

[not2easy]

Agree with the percentage option as lucy24 suggests. As to what percentage it should be, only you could know that. Maybe try "80%" and see if that looks good and go from there to add more or less width.

[NickMNS]

Set the percentage for the margin:

hr.head {
 margin: 5px 10% 4px;
}

One line! clean and simple, at 10% you achieve the same as 80% width as suggested by not2easy.

demo: [jsfiddle.net...]

[coothead]

"Do people still use <hr>? I’ve been trying to weed mine out for years."

I have no idea what people do but I did read this...

Changes in HTML5

"Although previous versions of HTML defined the hr element only in
presentational terms, the element has now been given the specific
semantic purpose of representing a “paragraph-level thematic break”.

Source:-
hr – thematic break [w3c.github.io]

...which may be of mild interest. ;)

birdbrain

[born2run]

Ok thanks! :)

[lucy24]

Changes in HTML5

That’s utterly characteristic of HTML 5. All HTML elements are for semantics--what it means--while CSS is for presentation--what it looks like.