How to remove line-height from top of text?

Question

I am using a left floated image next to text with a line-height of 2.

How can I align the top of the image to the top of the text?

• Collapsing the space created by the line-height (marked in red in the below screenshot) by reducing the line-height to 1 or smaller for all of the text is not an option for this project.
• This will also be part of the default styling used in the website's content so adjusting the margin manually for each occurrence is not feasible.
• This is not a single case scenario. There may be only text, only an image, image followed by text, or text follow by image. The text may be a header or paragraph.

Is there a way to remove the top of the line-height and double the bottom of the line-height?

.left {
  float:left;
}
.text {
  line-height:2;
}

<div>
  <img class="left" src="https://placehold.it/60x60">
  <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

JSFiddle

• While the ::first-line pseudo-element does come close to what I'm trying to do, it does not work to reduce line-height in Firefox nor does it provide the correct line-height between the first line and second line of text when wrapped. Seen here: http://jsfiddle.net/Dqmu8/25/

Answer 1

Add this style:

.text {
  transform: translateY(-0.6em);
}

Fiddle

Answer 2

Line height of 2 will put 1/2 an em above the line and 1/2 an em below the line. So you just need to subtract the 1/2 em from the text's top margin, and add it back on the image. If you place the image within the text's flow, it will work regardless of block type :

<p>

.left {
  float:left;
  margin-top:.5em;
}
.text {
  line-height:2;
  margin-top:-.5em;
}

<div>
  <p class="text">
     <img class="left" src="https://placehold.it/60x60">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

<h1>

.left {
  float:left;
  margin-top:.5em;
}
.text {
  line-height:2;
  margin-top:-.5em;
}

<div>
  <h1 class="text">
     <img class="left" src="https://placehold.it/60x60">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </h1>
</div>

Answer 3

Something like this?

.left {
  float:left;
  margin-right: 10px;
}

.right {
  float: right;
  margin-left: 10px;
}

.content p {
  line-height: 2;
}

.content img {
  margin-top: 10px;
}

<div class="content">
  <img class="left" src="https://placehold.it/60x60">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p></p>
  <img class="right" src="https://placehold.it/60x60">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p></p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

Answer 4

Like this you mean?

With image

.left {
  float:left;
  margin-top: 10px;
}
.text {
  line-height:2;
}
div img + .text {
  margin-top: -10px;
}

<div>
  <img class="left" src="https://placehold.it/60x60">
  <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

Without image

.left {
  float:left;
  margin-top: 10px;
}
.text {
  line-height:2;
}
div img + .text {
  margin-top: -10px;
}

<div>
  <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

Answer 5

Look at this. Is it what you need?

.left {
  float:left;
  margin-top: .5em;
}
.text {
  line-height:2;
}

<div>
  <img class="left" src="https://placehold.it/60x60">
  <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>