The <h2>
tag is a block level element, which means it will take up the full width and not allow anything to be positioned next to it. You can overwrite this behavior in CSS by using inline-block
:
h2 {
display: inline-block;
}
inline-block
is really nice because it allows the element to be positioned ‘inline’, which means elements only take up as much width as their content and they can be positioned next to other elements. At the same time, you are able to set block-level properties such as margin
and padding
, which don’t take effect on inline
elements.
Examples of inline-block
: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/