Block-level quotations in HTML are marked up by the blockquote
element. Technically speaking, the semantics of this elements says that a block-level quotation should be used for long quotations, whereas an inline-level quotation (namely the q
element) should be used for short quotations (e.g. sentences). Block-level quotations are all rendered in browsers with some default styles. Generally, for this kind of elements are used margins:
blockquote { margin: 1em 0 1em 2.5em; }
To create the default text indentation of a block-level quote, browsers use its left margin (of course this is the default for a writing system that uses a direction moving from left to right). This can be easily adjusted with CSS:
blockquote { margin: 1em 0; }
Sometimes, and especially on blogs, we'd like to have some prettier styles associated with these elements. For example, we might want to have a background image on the left side showing a pair of quotes, and the rest of the contents with a different set of styles. This is easy with CSS:
blockquote { width: 30em; font: 1.6em Georgia, serif; line-height: 1.4; padding: 0 0 0 85px; background: url(css-blockquote/quote-left.png) no-repeat 0 0; color: #444; } blockquote p { margin-top: 0; padding: 1em; background: #eee; border-top: 1em solid #666; border-radius: 6px 6px 0 0; }
The background image is 80 x 80 pixels in size, so we've set a left padding accordingly. Bear in mind, however, that the image will be fully shown as long as there is a certain amount of content inside our quote. Again, if your quotation is short, use the q
element instead. You can see the demo below.