Menu
I have an H1 style for my site:
.centercol h1 { color: #006bb6; font-weight: normal; font-size: 18px; padding:3px 3px 3px 6px; border-left:3px solid #c6c1b8; background:#f2efe9; display:block; } The background color spans the entire width of the centercol, 500px...
How do I make this H1 only span the width of the text of the H1?
360
Specify a width on the <h1> and use margin: 0 auto; if you want it centered. Or, alternatively, you could float the <h1> , which would make it only exactly as wide as the text.
There is no padding. There is just space allocated by the default line-height and no characters with descenders (like p, q, and g) in the text. Show activity on this post. Every font has their own vertical space which is called line-height.
You can use the inline-block value for display, however in this case you will loose the block feature of h1 i.e. the siblings will be displayed inline with h1 if they are inline elements(in which case you can use a line-break
).
display:inline-block; 
.h1 { width: -moz-fit-content; width: fit-content; // workaround for IE11 display: table; } All modern browsers support width: fit-content for that.
For IE11 we could emulate this behavior with display: table which doesn't break margin collapse like display: inline-block or float: left.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
