If I define a heading like <h1>
, its width is set to 100% by default.
Is there a way to make sure its width is set to the smallest value possible?
h1 is the highest heading level (and, by default, the largest in terms of font size) and h6 the lowest (and smallest).
Description. The HTML <h1> to <h6> tag is used to define headings in an HTML document. <h1> defines largest heading and <h6> defines smallest heading.
Heading sizes. The further down you go with headings, the smaller the headings should become. The H1 heading should be the largest heading on the page. The H2 heading is a little smaller than the H1 , and in turn the H3 heading is smaller than then H2 heading and so on.
h1 is the largest heading tag and h6 is the smallest one (h1 > h2 > h3 > h4 > h5 > h6). Example 1: HTML.
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.
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