How to prevent headings (<h1>) from taking up more width than they need?
If I define a heading like <h1>
, its width is set to 100% by default.
Is there a w开发者_开发百科ay to make sure its width is set to the smallest value possible?
You can give it display: inline
. This will make it behave like any text element - the default for <h1>
is display: block
.
There are other ways: float: left
for example, but I find this the simplest and the one with the fewest side effects.
Note that you will then probably have to add a <br>
to ensure a line break after the <h1>
.
Instead of display: inline
, give it display: inline-block
. This will retain the block-like qualities of the h1 tag, except for the 100% width.
Is there a way to make sure its width is set to the smallest value possible?
I think that width: fit-content;
is better.
https://jsfiddle.net/fqk1a2v6/
It's a block level element, so it follows the rules of display:block
. You can set display:inline
, which may do what you need or not, depending on the context.
精彩评论