0

我正在尝试将设计转换为 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;
}
4

2 回答 2

1

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

于 2015-06-08T18:52:14.357 回答
0

如果它是关于图像不站在边缘，那么，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

于 2015-06-08T18:52:16.127 回答