In CSS, what is a better way of forcing a line break after an element than making it a block element?

user_98389 0
Viewed 16188

I have an H3 heading that I'd like to style as having a particular background color, but without having the element's background take up the full width of the parent element. Seeing as H3 is by default a block element, my style would need to change the element to an inline-block element, or just an inline inline element like so:

h3 {
    background-color: #333;
    color: white;
    display: inline-block;
}

This will work fine, but only if it is immediately followed by a block element. I do not want to change the markup just to cater for this style, so I was wondering if there is a way to cause any adjacent element, irrespective of how it displays, to start on the next line?

Assume I can use CSS3.

css
6 Answers

If you don't need to center h3, this may help:

h3 {
  background-color: #333;
  color: white;
  display: inline-block;
  float: left;
  clear: left;
}
user_16123180
Related