Gap between 2 lines in a header text

[Zell Liew]

Hi there,

I’m new to HTML and CSS and I’m in the process of developing a blog for myself as a learning process.

I’m encountering some difficulties with the H1 text shown in the CodePen IO link
(http://codepen.io/zellwk/pen/qHzdF “H1 a link with problems”).

The problem is that when I mouse over the middle of the text (between the lines), there is one small section where the hover effects clear off because it was not part of the area.

If I change the display to block instead, I find the hover area too large for my preference (it extends all the way to the end of the content area)

I dont want to reduce the line height either as it will break the vertical rythm.

Is there anything else I can do?

Thanks in advance!!

Zell

[Paulie_D]

It’s the

h1 a

there is no need to do that…style the h1 and a elements separately. http://codepen.io/Paulie-D/pen/wdnHz

[wolfcry911]

add padding: 5px 0; to h1 a

[Paulie_D]

Or just do this

h1 a{
display:block;
}

[wolfcry911]

zellwk already stated that display block makes the hover area too large (the area to the right of the last line becomes hoverable).

[Alen]

> If I change the display to block instead, I find the hover area too large for my preference (it extends all the way to the end of the content area)

Block level elements will stretch across available area.
Imagine a rectangle around H1 this would be your hit area.

I don’t see any issues with doing it with display:block;

see here: http://codepen.io/anon/pen/wKbIh

[Zell Liew]

Hi all,

Thanks alot for the input.

@Paulie_D. I see your point in styling H1 and a tags differently. Thanks for that info there. However, that doesnt solve my problem of having a slight gap between the heading texts which hover doesnt trigger.

I guess the best way of doing it right now is still display:block.

Thanks guys!

[wolfcry911]

hello?

[Paulie_D]

>hello?

Hello…your solution was probably the ideal one for her preference.

Personally, I think **not** having linked header tag as block is bad UI/UX but that’s just me.

I dunno…is

Link text

better/worse than

Link Text

Is one any more semantic / best practise than the other?

Just asking.

Obviously, they will work slightly different.

[Zell Liew]

Ahaha.

By guys I was referring to @wolfcry911 and @alenabdula. Sorry guys, first time posting online, will take notice from now on. Apologies if i am rude in any way (:

regarding

Link text

or

Link Text

I dont think either is more semantic / a better practise imo. There is just some styling issues and I’m more used to the former and I think it works more intuitively.

Is there any difference anyway? I’d love to hear more opinions about it though.

[wolfcry911]

No, you weren’t rude – and I wasn’t looking for acknowledgement. I was referring to the fix I posted above which meets you’re criteria…

[Paulie_D]

>I don’t think either is more semantic / a better practise imo. There is just some styling issues and I’m more used to the former and I think it works more intuitively.

In effect there is very little difference except if you want the header to automatically clickable across the full block width & height.

Overall, I think I prefer..

Link Text

http://codepen.io/Paulie-D/pen/zrmvl

[Alen]

@Paulie_D what exactly are you trying to demonstrate with your CodePen?

h1 a {
display:block;
}

Would result in clickable link across full block on h1 a.

What happens if your design requires long H1 headline that links multiple words to multiple sources? You would be mixing and matching your code. Making styling really difficult. Although, this passes validation, I wouldn’t recommend using it. You would be limiting modularity of your code.

Keep your CSS simple. Set baseline style for all headings & links. If any specific headline needs altering, can inherit the base style, then you make any necessary changes by being more specific with your code.

so:

h1 {
/*code*/
}

then:

.post h1 {
/* diff. style /*
}

.sidebar h1 {
/* diff. style /*
}

Hope that helps,
-Alen

[Author]

Posts