如何捕捉到顶部的div

Question

我希望文字与图片完美对齐。但是文本在每一方都有一些空间。这应该在不同的设备上显示，所以只需硬编码如top：-3 px将无效。

有没有办法让文本捕捉到div的顶部。

当我将鼠标悬停在html元素chrome inspect上时，蓝色区域是显示div的选择叠加层：

<div class="content-with-padding">
<img src="http://www.slu.se/Global/externwebben/overgripande-slu-bilder/utbildning-bilder/SLU-Karriar/logos/logo_forb_tria.gif" />
<span>
    <div class="medium-title">Title</div>
    <div class="small-text">Some text</div>
</span>

.medium-title {
  font-size: 17px;
}

body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
}

.small-text {
  font-size: 14px;

}

img {
  float: left;  
}

JSFiddle：https://jsfiddle.net/fx314qhh/

Answer 1

top:-3px因为处理定位而无法工作。您可能需要使用padding-top:-3px;。如果没有，我们需要查看代码，因为通过查看图片无法回答

Answer 2

尝试

line-height: 0

并调整margin-top：值。 或者较低的行高值。 （例如，1em行高将相对于字体大小为1：1em）

在这种情况下，sx to px是跨浏览器一致性的最佳选择。

Answer 3

如果没有代码，很难确定确切的问题，但我们可以试一试。

所有文字都有一个叫line-height的东西，它是从字体顶部到字体底部的空间量。大多数字体沿顶部构建填充，以使多行文本可读。 CSS允许我们调整它。

p {
   line-height: 14px;
}

此代码会告知所有<p>个元素line-height总共14px。如果您的字体高于14px，则会重叠。

如果这不能解决您的问题，那么问题可能与边距/填充有关。

Answer 4

尝试：

.medium-title {
    font-size: 17px;
    line-height: 0.8;
}

https://jsfiddle.net/fx314qhh/1/