[JSWolf]

Here is the CSS code I use for blockquotes. There's one thing that's missed out and that is the bottom margin at the end of the chapter/section. I have the class so if the blockquote ends the chapter/section. The class .blockquote defines a bottom margin of 0. Also, I have my text indent set to 1.2em. For offset text, overall, I prefer using blockquote then I would a <div>.

This is the code I add to an eBook and use as needed. <hr/> is for section breaks. It gives a 20% line. img prevents the images from going off the screen. p is for most paragraphs with an indent. cover is for full screen images. <div class="cover"><img alt="" class="cover" src="../images/cover.jpg></div>. And body sets widows and orphans to 1 and sets no margins.

Fell free to use any of my CSS.

blockquote {
  margin-top: 1em;
  margin-right: 1.5em;
  margin-bottom: 1em;
  margin-left: 1.5em;
}
body {
  widows: 1;
  orphans: 1;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  text-align: justify;
}
hr {
  margin-top: 0.9em;
  margin-right: 40%;
  margin-bottom: 0.9em;
  margin-left: 40%;
  border-top: 2px solid;
}
img {
  max-height: 100%;
  max-width: 100%;
}
p {
  margin-top: 0;
  margin-bottom: 0;
  text-indent: 1.2em;
}
.blockquote {
  margin-top: 1em;
  margin-right: 1.5em;
  margin-bottom: 0;
  margin-left: 1.5em;
}
.cover {
  text-align: center;
  text-indent: 0;
  height: 100%;
}