CODEWITHSUNDEEP
javascripthtmlcss
Tum
Tum

Reputation: 3652

How to make the line of <hr> tag position right below the <h> tag?

Ok, let look these 2 pictures:

1-Ugly pic: where space between the line of <hr> and the <h> tag is too big.

enter image description here

2-Nice pic: where space between the line of <hr> and the <h> tag is kept minimum.

enter image description here

Can we achieve that in css?

Upvotes: 1

Views: 1141

Answers (3)

Britton
Britton

Reputation: 129

Honestly like Kheema already suggested it is better practice to use the border css property than the html hr element. The hr element is more about semantics now than presentation.

Upvotes: 1

Kheema Pandey
Kheema Pandey

Reputation: 10265

You can achieve putting border-bottom on h1 tag.

<h1>Samsung Galaxy S5</h1>

h1{font-weight:normal;border-bottom:1px solid #cccccc;}

I've made a example here which shows the difference if you used only heading tags and headings tag with <hr> tag. By default all heading tags h1,h2,h3,h4,h5,h6 have some padding and margin which is varies on every browser.

Check the DEMO to see the difference between using margin and padding or without margin; padding

Upvotes: 2

Andrei
Andrei

Reputation: 3106

Since you didn't post any code I assume this is a general and not specific problem.

This can be achieved with CSS using padding or margin properties, depending on scenario.

By default the browsers add some style. Most browsers use margin for this space (since it is most appropriate in this scenario).

Here is an example of adjusting that margin to resemble the wikipedia screenshot:

http://jsfiddle.net/D5gmV/

h1{
    margin:5px 0 0 0;
}

h3{
    margin:10px 0;
}
hr{
    margin:0;
}

Upvotes: 0

Related Questions