Question

无法理解为什么，尽管width:450px margin:0 auto，width .menu和width .blog是不同的。看我的代码：

＆＃13;

body {
  border-top:4px solid #F55D2D;
  background: white;
  margin:0 auto;
  font-family: 'Mako', sans-serif;
}

header {
  width:450px;
  text-align:center;
  margin:0 auto;
}

.menu {
  width:450px;
  margin: 0 auto;
  background:green;
}

.menu li {
  display:inline;
  padding:5px 15px;
  
}

.blog {
  width: 450px;
  margin:0 auto;
  background:green;
}

.post {
  /*border: 1px solid grey;*/
  margin: 20px auto;
  
  height:125px;
  padding:0 10px;
  border-radius:4px;
  color:black;
  transition: height 0.5s;
  -webkit-transition: height 0.5s;
  -moz-transition: height 0.5s;
  position:relative;
}

.post::after {
  background:url(Photos/intro3cropped.jpg);
  content: "";
  opacity: 0.3;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1; 
  background-repeat: no-repeat;
}

＆＃13;

<body>
  <header>
    <h1 class="title">XYZ EVENTS</h1>
    <ul class="menu">
      <li class="menuAll">ALL EVENTS</li>
      <li class="menuConcert">CONCERTS</li>
      <li class="menuTheatre">THEATRE</li>
      <li class="menuFestival">FESTIVALS</li>
    </ul>
  </header>
  <div class="blog">
    <div class="post concert">
      <h4>Concert 1</h4>
      <p>Where: XYZ Arena</p>
      <p>When: XYZ h</p>
      <small>(Click to expand)</small>
      <p class="descr">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
      </p>
    </div>

＆＃13;

为什么.blog比.menu更薄？谢谢！

Answer 1

因为您的菜单是列表项，列表项应用了默认填充。请参阅下面的示例，了解相同的代码，但删除了ul元素上的填充。

body {
  border-top:4px solid #F55D2D;
  background: white;
  margin:0 auto;
  font-family: 'Mako', sans-serif;
}

header {
  width:450px;
  text-align:center;
  margin:0 auto;
}

.menu {
  width:450px;
  margin: 0 auto;
  background:green;
  padding:0;
}

.menu li {
  display:inline;
  padding:5px 15px;
  
}

.blog {
  width: 450px;
  margin:0 auto;
  background:green;
}

.post {
  /*border: 1px solid grey;*/
  margin: 20px auto;
  
  height:125px;
  padding:0 10px;
  border-radius:4px;
  color:black;
  transition: height 0.5s;
  -webkit-transition: height 0.5s;
  -moz-transition: height 0.5s;
  position:relative;
}

.post::after {
  background:url(Photos/intro3cropped.jpg);
  content: "";
  opacity: 0.3;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1; 
  background-repeat: no-repeat;
}

<body>
  <header>
    <h1 class="title">XYZ EVENTS</h1>
    <ul class="menu">
      <li class="menuAll">ALL EVENTS</li>
      <li class="menuConcert">CONCERTS</li>
      <li class="menuTheatre">THEATRE</li>
      <li class="menuFestival">FESTIVALS</li>
    </ul>
  </header>
  <div class="blog">
    <div class="post concert">
      <h4>Concert 1</h4>
      <p>Where: XYZ Arena</p>
      <p>When: XYZ h</p>
      <small>(Click to expand)</small>
      <p class="descr">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
      </p>
    </div>

另一种选择是在box-sizing:border-box;元素上设置ul，而不是删除填充。

body {
  border-top:4px solid #F55D2D;
  background: white;
  margin:0 auto;
  font-family: 'Mako', sans-serif;
}

header {
  width:450px;
  text-align:center;
  margin:0 auto;
}

.menu {
  width:450px;
  margin: 0 auto;
  background:green;
  box-sizing:border-box;;
}

.menu li {
  display:inline;
  padding:5px 15px;
  
}

.blog {
  width: 450px;
  margin:0 auto;
  background:green;
}

.post {
  /*border: 1px solid grey;*/
  margin: 20px auto;
  
  height:125px;
  padding:0 10px;
  border-radius:4px;
  color:black;
  transition: height 0.5s;
  -webkit-transition: height 0.5s;
  -moz-transition: height 0.5s;
  position:relative;
}

.post::after {
  background:url(Photos/intro3cropped.jpg);
  content: "";
  opacity: 0.3;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1; 
  background-repeat: no-repeat;
}

<body>
  <header>
    <h1 class="title">XYZ EVENTS</h1>
    <ul class="menu">
      <li class="menuAll">ALL EVENTS</li>
      <li class="menuConcert">CONCERTS</li>
      <li class="menuTheatre">THEATRE</li>
      <li class="menuFestival">FESTIVALS</li>
    </ul>
  </header>
  <div class="blog">
    <div class="post concert">
      <h4>Concert 1</h4>
      <p>Where: XYZ Arena</p>
      <p>When: XYZ h</p>
      <small>(Click to expand)</small>
      <p class="descr">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
      </p>
    </div>

Answer 2

因为菜单元素是ul，并且默认情况下，它有一个填充，例如，在webkit浏览器中，应用了以下样式：

ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}

由于填充是宽度的一部分，只需将padding: 0添加到.menu，这就是人们使用normalize.css或reset.css.

的原因之一

为什么宽度不同？

2 个答案: