html - 如何显示 PSD 文件到 CSS 的精确距离？

Question

我是将 PSD 转换为 HTML、CSS 的新手。我遇到了让我累了好几天的问题，它是关于将 photoshop 文件中的元素与 CSS 对齐。这是 psd 文件中的列表，我想将其转换为 HTML、CSS 形式:

我使用标尺工具并得到列表之间的距离为 13px，字体大小为 12px。

这是我在 HTML 中创建此列表的代码:

HTML:

<div id="categories">
  <ul id="list-cate">
    <li><a href="#">DRESSES</a></li>
    <li><a href="#">ACCESSORIES</a></li>
    <li><a href="#">TOPS</a></li>
    <li><a href="#">HANDBAGS</a></li>
    <li><a href="#">LINGERIE</a></li>
  </ul> </div>

CSS:

#categories {
    width: 225px;
    background-color: #fff;
    font-family: Tahoma;
    font-size: 12px;
    padding-top: 18px;
}

#list-cate {
    padding-left: 25px;
}

#list-cate li {
    margin-bottom: 13px;
}

但是当我在 Firefox 中运行它时，使用 Measure 插件，我看到它显示:

我不知道为什么 PSD 和 CSS 之间的距离是错误的。任何人都可以给我一个答案，谢谢!!

Answer 1

在#list-cate 的 css 中添加 margin:0;

#list-cate { margin:0;}