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.