Question

问题是psd布局30px和30px上的垂直填充，但实际上，在浏览器的css代码中设置此大小显示填充35px和35px。重置边距和填充只有可能的一切，没有结果。

请帮助理解，也许是某些被忽视的地方。

屏幕截图 https://yadi.sk/d/LsDSh_UZTDZDW

HTML

  <header class="header">
    <div class="container">
       <nav class="header-menu">
         <ul>
       <li><a href="#">Главная</a></li>
       <li><a href="#">Информация</a></li>
       <li><a href="#">Новости</a></li>
         </ul>
       </nav>
    </div>
  </header>

CSS

body {
font-size: 16px;
width: 100%;
}
.container {
margin: 0 auto;
width: 940px;
}
/* Header */
.header {
background: #000000;
width: 100%;
border-top: 1px solid #242424;
}
/* Header --> menu */
.header-menu li {
display: inline-block;
}
.header-menu a {
color: #fff;
display: inline-block;
padding-top: 30px;
padding-bottom: 31px;
padding-left: 22px;
padding-right: 22px;
margin-right: -0.2em;
text-decoration: none;
}

Answer 1

ul元素为您提供默认padding-left和margin-top，body提供margin：

nav.header-menu ul { padding:0; margin:0; }
body {margin : 0}

垂直填充的奇怪行为

1 个答案:

JSFiddle