用于边距的像素完美测量方法答案

【问题标题】：Pixel Perfect Measure approach for margins用于边距的像素完美测量方法
【发布时间】：2017-06-03 08:35:07
【问题描述】：

在我的团队中，我们遇到了一个与像素度量相关的问题。当设计到来时，我们开始按照设计规范开发网站的组件，例如从链接到人名的设计应该是 18px，如图所示：

但是当我们去实现并查看结果时，我们有更多（或有时更少）像素，因为文本本身有一个高度，然后有指定的边距：

因此，在这种情况下，您最终会在两个段落之间得到 23 像素，而不是设计指定的 18 像素，这会在我们的积压工作中造成缺陷。

我们正在尝试定义避免此问题的最佳方法。有什么建议吗？

例子：

h2 {
    font-weight: bold;
    margin-top: 0;
    font-size: 16px;
    margin-bottom: 
}

a,  a:link, a:hover, a:active, a:visited {
    color: #6b94ff;
    text-decoration: none;
    font-weight: normal;
    font-size: 16px;
}
p {
    margin: 0 0 10px;
    font-size: 16px;
}

<div class="col-xs-12 col-sm-7 details">
        <div class="row">
            <h2 class="title-link">
                <a href="/news/updates/imds-first-ever-emba-discovery-expedition-to-vietnam/" target="_self">
                    IMD’s first-ever EMBA Discovery Expedition to Vietnam
                </a>
            </h2>
                <p class="topics">
                    Topics: <span>Economics</span>
                </p>
            <p>
                Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.
            </p>

            <a class="promotional" href="#" target="_self">
                Read more
            </a>
        </div>
    </div>

【问题讨论】：

我们需要工作代码 sn-ps 来重现问题，否则我们看不到如何/为什么/什么
内边距、边距、边框、行高、缩放系数、比例、位置...

标签： html css web

【解决方案1】：

从h2,a,p 中删除所有当前边距，并将此行添加到您的代码中：

a,p,h2 { line-height: 16px; margin: 0 0 18px 0 }

您需要移除 HTML 默认边距并设置行高（默认1.333333）到你指定的字体大小16px。

但是，我可以补充一点，使用固定字体值是非常糟糕的做法，因为用户应该能够修改 HTML 默认字体大小以满足他们的要求（并非所有人都有 20/20 视力），1em或1rem 是首选，无论如何默认为16px。

正确的代码将是（对于您的示例）：

a,p,h2 { line-height: 1rem; margin: 0 0 1.125rem 0 }/* calc(18/16) */

【讨论】：