Horizontal rule: css styling Horizontal rule: css stylingthehazels

Horizontal rule
: css styling

I’ve just realised how adaptable the <hr> (horizonal rule) element can be by using css styling. I’ve never much like the default look and so have often changed it to a simple single line. This isn’t as simple as it sounds since an <hr> is an element composed of padding, surrounded by borders, surrounded by margin. So a single black line:


requires:

hr {
   padding: 0;
   border: none;
   border-top: 1px solid black;
}

Using the margins, you can make it shorter and centred:


hr {
   padding: 0;
   border: none;
   border-top: 1px solid black;
   margin: 0 5em;
}

or just indent it one side:


hr {
   padding: 0;
   border: none;
   border-top: 1px solid black;
   margin-right: 10em;
}

but the best is playing with colours:


hr {
   padding-top: 5px;
   background-color: red;
   border: none;
   border-top: 5px solid blue;
   border-bottom: 5px solid yellow;
   margin: 1em 20em;
}

hr {
   padding-top: 40px;
   background-color: red;
   border: none;
   border-left: 40px solid blue;
   border-right: 40px solid yellow;
   margin: 1em 120px;
   width: 120px;
}

About Antonia Whitaker

An administrative, sales and marketing background has given me an understanding of what users want from their website. I do not confuse issues with technical jargon and I listen to what people want.

28. March 2014 by Antonia Whitaker
Categories: Tools | Tags: | Leave a comment

Leave a Reply

Required fields are marked *