Why width is different?

Question

Can't understand why,despite having the same width:450px and margin:0 auto, width of .menu and width of .blog is different. See my code:

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

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

Why .blog is thinner than .menu? Thanks!

j08691 · Accepted Answer · 2015-09-06 00:38:07Z

Because your menu is a list item and list items have default padding applied. See the example below for the same code but with the padding on the ul element removed.

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>

Another option is to set box-sizing:border-box; on the ul element instead of removing the padding.

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>

Tomas Ramirez Sarduy · Accepted Answer · 2015-09-06 00:39:43Z

1

Because the menu element is an ul and by default, it has a padding, in webkit browser for example, the following styles are applied:

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

and since the padding is part of the width, just add padding: 0 to .menu, that's one of the reasons why people use normalize.css or reset.css.

answered Sep 6, 2015 at 0:39

Tomas Ramirez Sarduy

17.5k8 gold badges73 silver badges86 bronze badges

2 Comments

aixecador Over a year ago

Thanks Tom. Yes, this is aligned with the answer above. The funny thing is that I am using normalize css. Not sure why yet but I will learn soon I guess. In any case, if normalize is supposed to fix this kind of things, seems it didn't work for me

Tomas Ramirez Sarduy Over a year ago

@perettxintxola normalize don't reset everything to 0 like reset.css do, they keep some browser specific styles, like this one ;)

Collectives™ on Stack Overflow

Why width is different?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related