图片和文本行之间的等垂直 space

Question

我正在尝试将设计转换为 HTML/CSS，在图像和文本之间具有等量的垂直 space，但无法这样做。设计者在图像、标题和描述之间创建了 20px 的边距，但是由于 CSS 处理行高的方式，所有这些元素之间的 space 并不相同。

 <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;
}

Answer 1

你走在正确的轨道上。将需要 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，我将字体大小设置为零，以便从图像周围移除下降高度。

Answer 2

如果是关于图像不在边缘，那么应该重置垂直对齐：

.teaser-image, .teaser-title, .teaser-desc {
    margin-bottom: 20px;
    line-height: 21.6px;    
  text-align: center;
  box-shadow:inset 0 0 0 1px;/* show me ! */
 }

.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;
}

img {vertical-align:top;}/* get close to me :) */

 <div class="teaser-image">
     <img src="http://dummyimage.com/100x100&text=teaser">
 </div>
 <div class="teaser-title">At Your Service</div>
 <div class="teaser-desc">
     blah blah blah
 </div>

http://codepen.io/gc-nomade/pen/ZGKjLW

图片和文本行之间的等垂直 space

Equal vertical space between images and lines of text

css

baseline