Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to prevent headings (<h1>) from taking up more width than they need?

Tags:

html

css

width

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?

like image 520
Pieter Avatar asked Jan 23 '10 19:01

Pieter


People also ask

Is h1 the smallest heading?

h1 is the highest heading level (and, by default, the largest in terms of font size) and h6 the lowest (and smallest).

Which tag is used to display heading with largest size?

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.

Is h1 the biggest 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.

What is the largest size for heading?

h1 is the largest heading tag and h6 is the smallest one (h1 > h2 > h3 > h4 > h5 > h6). Example 1: HTML.


2 Answers

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>.

like image 179
Pekka Avatar answered Sep 23 '22 06:09

Pekka


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.

like image 24
DaveS Avatar answered Sep 25 '22 06:09

DaveS