CSS Margin: 0 Is Not Setting to 0

CSS Margin: 0 is not setting to 0

Try...

body {
   margin: 0;
   padding: 0;
}

jsFiddle.

Because of browsers using different default stylesheets, some people recommend a reset stylesheet such as Eric Meyer's Reset Reloaded.

margin: 0; is not setting margin to 0

It is a two-part problem, with two alternate solutions.

Solution 1:

First, the <h1> element within your <header> element. h1 elements have an inherent margin-top and margin-bottom of 16px.

Second, the float: left; is causing your header to shift down. Remove float: left; from header {} and add this to your CSS to have your header sit flush with the top of your page:

header h1 {
    margin-top: 0px;
}

Example:

header h1 {    margin-top: 0px;}
html, body, header {  margin: 0;  padding: 0;}

body {  background-color:#d7d7e8;}
/*************************************************NAV*************************************************/header {  width:100%;  margin:0 0 30px 0;  background-color:cyan;}
/**************************************************PORTFOLIO PAGE***************************************************/#wrapper {  max-width:1550px;  margin:0px auto;}
#gallery li {  width:30%;  float:left;  list-style:none;  margin:0% 10%;}
img {  max-width:100%;}
a img {  margin-bottom:-20px;}
a p {  background-color:#ffffff;  text-align:center;  padding:5px;  border-radius:0 0 6px 6px;}
li a, header a {  text-decoration:none;  color:#58585b;}

<header>  <a href="#">    <h1>Jason K</h1>    <h2>Bum</h2>  </a></header><div id="wrapper">  <section>    <ul id="gallery">      <li>        <a href="#">          <img src="http://www.asi.it/files/images/1024X768_02_0.jpg" alt="New York">          <p>sample sample sample</p>        </a>      </li>      <li>        <a href="#">          <img src="http://oldweb.lbto.org/images/n891_1024x768.jpg" alt="Los Angeles">          <p>sample sample sample</p>        </a>      </li>    </ul>  </section></div>

HTML still has gaps in container despite 0 margin/padding

Your wrapped entire element would be body? Then you have apply padding and margin 0 to it. You can write in your Style:

body {
   margin: 0;
   padding: 0;
}

That will be remove this space.

CSS margin: 0 auto not centering

It is working.

The problem is you're centering a div, which is a block-level element by default, and which therefore occupies 100% width of its parent (body, in this case). So there's no space to move horizontally, hence no space to center.

For an illustration see this revised demo which has an added border around .container.

.container {
  margin: 0 auto;
  border: 1px solid red;
}

[class*='col-'] {
  float: left;
}

.col-2-3 {
  width: 66.66%;
}

.col-1-3 {
  width: 33.33%;
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}

.col-word {
  width: auto;
  height: auto;
  padding: 25px;
  border: 5px #000 solid;
  border-left: 0px;
  border-right: 0px;
  background-color: #A7F4F6;
  font-size: xx-large;
  text-align: center;
}

<div class='container'>
  <div class="grid">
    <div class='grid'>
      <div class="col-1-3">
        <p class='col-word'>T</p>
        <p class='col-word'>V</p>
      </div>
    </div>
    <div class='grid'>
      <div class='col-1-3'>
        <div class='letter'>W</div>
      </div>
      <div class='col-1-3'>
        <div class='letter'>P</div>
      </div>
      <div class='col-1-3'>
        <div class='letter'>V</div>
      </div>
    </div>
  </div>
</div>

Margin of main container set to 0 yet there is still a margin

Set the margin for all elements to 0px, this will remove the extra margin

* {
  margin: 0px;
}

Also add width: 100% to your .container

Note: Add this as the first style in your CSS. This can be overridden by the styles specified below.

Below is an update to your code.

* {  margin: 0px;}body {  padding-top: 50px;}.container {  width: 100%;  overflow: hidden;  margin-left: 0 auto;  margin-right: 0 auto;  padding: 0 0 0 0;}#content {  overflow: auto;  background-color: #FFFFFF;  margin-left: 0;  margin-right: 0;}#content-left {  color: #FFFFFF;  float: left;  background-color: #666666;  width: 30%;}#content-right {  color: #FFFFFF;  float: right;  background-color: #333333;  width: 70%;}

<body>  <div class="container" id="main">    <div id="content">      <div id="content-left">        <div>LEFT</div>
      </div>      <div id="content-right">        <div>RIGHT</div>
      </div>
    </div>  </div></body>

Margin exists despite being set to 0 in stylesheet - CSS

A block-level element like a div in-flow (A div is a block-level element, not an inline element like a span, img or strong) has an automatic right margin because it (normal div's) want to be 100% of the width of the parent div.

Solutions are float:left (to get it out of flow), display:inline-block (to change its flow-abilities, as mentioned in the comments above, I'm not hogging credit :) ) and flexbox (which is relatively new so I wouldn't recommend jumping in on that just yet).

Also, have a look at bootstrap and its grid system to get better aligning for your website which also scales beautifully to phones and tablets.

Minor addition:

<div id="header">
  <div class="container">
  </div>
</div>
<div id="main">
  <div class="container">
  </div>
</div>

with:

#header,#main {
  width: 100%;
}
#header {
  background: brown;
  height: 3em;
}

.container {
  width: 1000px;
  margin: 0 auto;
  min-height: 20em;
}

creates an easy (but not responsive) centered solution

How to set all element have 0 padding 0 margin on global styling

try :

    * {
         box-sizing: border-box !important;
         padding: 0 !important;
         margin: 0 !important;
      }

---

Related Topics