css - 图像和文本行之间的垂直间距相等

我正在尝试将设计转换为图像和文本之间具有相等垂直空间的HTML / CSS，但无法这样做。设计人员创建的图片，标题和desc之间的间距为20px，但是由于以行高处理CSS的方式，所有这些元素之间的间距都不相同。

http://jsfiddle.net/r9370Lxr/

 <div class="teaser-image">
     <img src="teaser1.png">
 </div>
 <div class="teaser-title">At Your Service</div>
 <div class="teaser-desc">
     blah blah blah
 </div>


.teaser-image, .teaser-title, .teaser-desc {
    margin-bottom: 20px;
    line-height: 21.6px;
 }

.teaser-title {
    font-family: "myriad-pro-condensed",sans-serif;
    font-weight: 700;
    font-size: 24px;
    text-align: center;
}

.teaser-desc {
   font-size: 16px;
   font-family: "myriad-pro-condensed",sans-serif;
   text-align: center;
}

最佳答案

您走在正确的轨道上。将需要20px边距的元素的line-height设置为1。设置为1意味着行高将等于当前字体大小，例如100％字体大小。一些例子：

line-height: 1

字体大小= 20，行高= 20

line-height: 1.5

字体大小= 20，行高= 30（20 x 1.5）

的HTML

 <div class="teaser-image">
     <img src="http://placehold.it/500x50/">
 </div>
 <div class="teaser-title">At Your Service</div>
 <div class="teaser-desc">
     blah blah blah
 </div>

的CSS

.teaser-image,
.teaser-title,
.teaser-desc {
    margin: 20px 0;
    line-height: 1;
 }
.teaser-image {
    font-size: 0;
}
.teaser-title {
    font-family: "myriad-pro-condensed",sans-serif;
    font-weight: 700;
    font-size: 24px;
    text-align: center;
}
.teaser-desc {
   font-size: 16px;
   font-family: "myriad-pro-condensed",sans-serif;
   text-align: center;
}

jsFiddle：http://jsfiddle.net/2ojvpp53/

对于.teaser-image，我将字体大小设置为零，以便从图像周围除去下降高度。

关于css - 图像和文本行之间的垂直间距相等，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30716619/