开发者

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜