javascript - 如何精准匹配设计图纸尺寸
黄舟
黄舟 2017-04-11 11:55:06
0
1
340

设计稿要求上下字与字之间的高度是10px
但是如果简单的设置一个margin-bottom:10px;会发现实际的高度是大于10px的。
有什么好的办法来实现字与字之间的高度精准问题么?
(ps.目前用工具量出来实际高度再去从设置的margin-bottom:10px中减去。但是这样非常麻烦。)

css部分
*{
    margin: 0;
    padding: 0;
}
.wrap p{
    font-size:22px;
    border:1px solid #000;
    margin-bottom:10px;
}

html部分
<p class="wrap">
        <p>商品名</p>
        <p>100元</p>
</p>
黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全部回复(1)
PHPzhong

比如你的字体大小是14号字体,那么行高就为24。
如果你的字体大小是16号字体,那么行高就为36。
所以就是设置行高为一个字体大小+10px。
根据你的结构所以就是应该设置为

.wrap {line-height:1}
.wrap p {margin-bottom: 10px}
<p class="wrap">
        <p>商品名</p>
        <p>100元</p>
</p>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!