Question

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

 <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

如果图像不是站在边缘，那么，vertical-align应该是重置的东西：

.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

图像和文本行之间的相等垂直空间

2 个答案: