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

html css width
Pieter picture Pieter · Jan 23, 2010 · Viewed 28.2k times · Source

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?

Answer

Pekka picture Pekka · Jan 23, 2010

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

Related questions

How can I make a div not larger than its contents?

I have a layout similar to: <div> <table> </table> </div> I would like for the div to only expand to as wide as my table becomes.

Read More
How to make a div fill a remaining horizontal space?

I have 2 divs: one in the left side and one in the right side of my page. The one in the left side has fixed width and I want the one of the right side to fill the remaining space.

Read More
Does height and width not apply to span?

Total noob question, but here. CSS .product__specfield_8_arrow { /*background-image:url(../../upload/orng_bg_arrow.png); background-repeat:no-repeat;*/ background-color:#fc0; width:50px !important; height:33px !important; border: 1px solid #dddddd; border-left:none; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-bottom-left-radius:0px; …

Read More