Member Avatar for BrianDickson

I want to style an H3 header with a background colour. If I do this:

h3 {
 background-color: #000;
 color: #fff;
}

and

<h3>header tag</h3>

for example, the output in the browser will be displayed across the entire width of it's parent container. If I wrap "header tag" in a <span> tag instead of a div, that the background colour would 'span' the text only.

Is there a way to style an H3 tag so the background colour will 'span' the text of H3 only?

I want to know if this is possible so I can continue to write H3 tags instead of say <span class=h3></span>

  • 4 Contributors
  • 5 Replies
  • 267 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by BrianDickson

Dani AI

Generated

Brief summary and proven options (keeps the element semantic as an H3)

asked how to keep an H3’s background limited to the text instead of stretching full‑width. Replies by , and pointed toward making the heading behave like an inline box. Below are a few practical, pragmatic ways to shrink‑wrap the H3 background while preserving semantics, with caveats and fallbacks.

Simple, widely compatible: make the H3 act like a table (shrink‑to‑fit)

h3.shrink {
  display: table;
  margin: 0;
  padding: .25em .5em;
  background: /* your color */;
  color: /* your color */;
}

This gives a block that sizes to its content (no fixed width to manage) and works well across modern and older browsers (IE8+ support shown in compatibility tables). (caniuse.com)

Modern CSS: use fit‑content for a block that clamps to its text

h3.shrink {
  width: fit-content;
  padding: .25em .5em;
  background: /* your color */;
  color: /* your color */;
}

fit-content is the clearest, most future‑proof approach for modern projects; it shrinkwraps the box but remains responsive if the container is small. Provide a display/table fallback for very old browsers if necessary. (developer.mozilla.org)

Inline behaviour or flow alternatives (flex / float + clearing)

/* inline-level flex (keeps heading inline with text) */
h3.shrink { display: inline-flex; align-items: center; padding:.25em .5em; }

/* float shrinkwrap (removes from flow; clear the float) */
h3.shrink { float:left; padding:.25em .5em; }
.container::after { content:""; display:block; clear:both; }

inline-flex is a clean inline option in modern browsers; float also shrinkwraps but affects document flow and needs clearing. If old IE (6/7) must be supported, legacy “hasLayout” workarounds exist (conditional rules or the old zoom/hasLayout hacks). (caniuse.com)

Note: reset default H3 margins when necessary, add accessible contrast/padding, and pick the approach that matches browser-support and layout constraints for the project.

Recommended Answers

All 5 Replies

Member Avatar for drjohn

<h3><span>content in here</span></h3>

h3 span{css in here}

You do know you can give the h3 tag a width...

Also <span class="h3"> </span> is probably invalid, as h3 is reserved as a tag name.

Edited by drjohn because: n/a
Member Avatar for BrianDickson

Thanks.

I was trying to get away without using the SPAN stags and just using the header tags.

With regards adding width to header tags, yes I did know that, and tried it. The problem
I found was that the width is only to the with of the parent container, not the text length and/or size of the text, which means you would have to adjust the width each time, depending on the length of the text between the tags.

Member Avatar for tinimic

Using your example:

h3 {
 background-color: #000;
 color: #fff;
 display: inline;
}

display:inline-block; is not supported in ie, but display:inline; seems to work in all I've tried.

Edited by tinimic because: update
Member Avatar for Member #120589

How about setting the span display to inline-block? Will this give it an automatic content width? Think IE6/7 may have an issue with certain elements set to this - read somewhere that only naturally inline elements (like span) will work with inline-block. Haven't tried it though.

//EDIT

Sorry, didn't read previous posts. Disregard if you don't want spans. Doh!

inline-block with just h3 - worked for me in Chrome, but failed in IE.

Edited by Member #120589 because: n/a
Member Avatar for BrianDickson

adding the 'display:inline' worked in my dev environment (firefox/chrome/opera in Linux). Although I haven't tested yet under any IE ver browsers, according to w3school, it will be OK but 'inline-block' wont.

Thanks for the help chaps.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.