Question

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

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

因此，在这种情况下，您最终会在两段之间使用23px而不是指定设计的18px，这会在我们的积压中造成缺陷。

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

示例：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

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

您需要删除HTML默认边距并设置line-height（默认1.333333）指定的16px字体大小。

然而，我可能会补充说，使用字体的固定值是非常糟糕的做法，因为用户应该能够修改HTML默认字体大小以满足他们的要求（并非所有人都有20/20视力），{{1默认情况下，或1em是1rem，默认情况下为16px。

正确的代码（对于你的例子）：

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

边距的像素完美度量方法

1 个答案: