CODEWITHSUNDEEP
htmlcss
aixecador
aixecador

Reputation: 876

Why width is different?

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!

Upvotes: 2

Views: 44

Answers (2)

Tomas Ramirez Sarduy
Tomas Ramirez Sarduy

Reputation: 17481

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.

Upvotes: 1

j08691
j08691

Reputation: 208032

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>

Upvotes: 2

Related Questions