Stylization of HR

Asked

Viewed 2,525 times

1

I have a line on a layout I’m doing, and I didn’t want to create a div just for her. I would like to continue the hierarchy I created. So I decided to use the <hr /> Example:

.empresa hr {
    width: 100%;
    height: 1px;
    background-color: #dddddd;
}

What happens, is that, looking with zoom, I have the impression that the height of the line is not 1px, I have the impression that already a border.

Is that normal? The <hr /> is still usual?

css

  • I usually use border even, to avoid this complication. HR is boring to stylize. Remember that in some cases, even to style the HR you have the color E the edge, in other cases the HR can be "only edge". And you still have to adjust padding and margin, to be equal in browsers. If you do not change the semantics of the page, I think it’s best to use stylized SPAN or DIV.

  • I got a div above that hr it’s just text, it’s gonna get weird I put edge.

  • Don’t put edge to text, put one <span class="regua"></span> instead of HR, and in CSS define something like: .regua {display:block; padding:0; margin: 10px 0; width:100%; height:1px; background-color:#ddd}. Demo: http://jsfiddle.net/6t6jz732/

  • 1

    PS: I would also prefer to use <hr> instead of that sort of thing, but sometimes it doesn’t pay off. The question is very relevant, however it may be, and I hope that the staff will put well-completed and well-tested solutions browsers.

1 answer

1

To hr also has edges. Try to do the following, eliminate the side Boras and the bottom edge, for example.

.empresa hr {
    width: 100%;
    height: 1px;
    border: 0px;
    border-top: 1px solid red;
    background-color: #dddddd;
}

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.