[AlexBell]

Originally Posted by RbnJrg

You have to solve two problems and not one For that reason you wrote:



The first problem is to position (properly) a grey (red) square; the second problem is to position the drop cap inside that square (of that way you won't have the issue of the color extended for two lines). You can do that (only with css2) of the following way:

p {
    text-indent: 0;
    text-align: justify;
}

/* Style to set the grey square */
.DropSpace {
    float: left;
    font-size: 3em;
    width: 1em;
    height: 1em;
    background: grey;
    padding: 5px;
    margin: -0.0em 5px -0.2em 0;
}

/* Style to fit the DropCap inside the grey square */
.DropCap {
    display: block;
    position: relative;
    top: -0.15em;
    left: -0.06em;
    font-size: 1.4em;
    font-weight: bold;
    font-family: sans-serif;
    width: 0.8em;
    height: 0.8em;
    text-align: center;
}

And in the .xhtml file:

<p><span class="DropSpace"><span class="DropCap">B</span></span>ehind the walls of Augustine,<br />
  he notes the seven traits of plants<br />
  and how their combinations<br />
  tell us that what was shall surely be<br />
  again. He writes of <i>dominance</i><br />
  and <i>recession</i>, of the patterns</p>

This is how it looks in ADE (with different font sizes):

Attachment 145099 Attachment 145100

Below I attach the respective epub.

Regards
Rubén

Bless you! that looks great, and to be exactly what I want.