Question

嵌套<div>的

<ul>元素与其子元素<ul>相比，px单位的填充高度过高。在下面的代码中给出了相同的填充＆＃34; 1px＆＃34;同时为<ul>＆amp; <div>。但与<ul>相比，div渲染的填充量过多。给两个元素赋予不同的背景以区分两个填充。

＆＃13;

body {
  margin: 0;
  padding: 0;
}

div {
  background-color: black;
  color: white;
  padding-top: 1px;
  padding-bottom: 1px;
}

ul {
  background-color: red;
  list-style-type: none;
  padding-top: 1px;
  padding-bottom: 1px;
}

li {
  display: inline;
  padding: 0px 10px;
}

＆＃13;

<h1>BUSSINESS NAME</h1>

<div>
  <ul>
    <li>HOME</li>
    <li>SERVICE</li>
    <li>ABOUT</li>
    <li>CONTACT</li>
  </ul>
</div>

＆＃13;

Answer 1

<ul>元素默认使用margin-top和margin-bottom。这会导致<ul>元素顶部和底部的额外空间。

默认情况下，padding-left上还设置了<ul>。

＆＃13;

body {
  margin:0;
  padding:0;
}   
div {
  background-color:black; 
  color:white;
  padding-top:1px; 
  padding-bottom:1px;
}
ul {
  background-color:red;
  list-style-type:none;
  padding-top:1px;
  padding-bottom:1px; 
  margin-top:0;
  margin-bottom:0;
}   
li {
  display:inline;
  padding:0px 10px;
}

＆＃13;

<h1>BUSSINESS NAME</h1>
<div>
  <ul>
    <li>HOME</li>
    <li>SERVICE</li>
    <li>ABOUT</li>
    <li>CONTACT</li>
  </ul>
</div>

＆＃13;

为什么带有嵌套ul的<div> s渲染过多的填充宽度

1 个答案: