CSS Padding(?) on inline block top messing up my div content

Question

https://codepen.io/markoslk/pen/qNgWGN

h1 {
  color: white;
  font-size: 90px;
  text-align: center;
  width: 950px;
  height: 100px;
  margin: auto;
  margin-top: 20px;
  border-radius: 5px;
  background-color: darkblue;
}
#slogan {
  font-size: 40px;
  text-align: center;
  margin: auto;
  margin-top: -3px;
  font-family: Agency FB;
  width: 940px;
  height: 50px;
  background-color: white;
  border: 5px solid darkblue;
}
#table {
  display: inline-block;
  width: 225px;
  height: 170px;
  margin-top: 59.25px;
  margin-left: 59.25px;
  text-align: left;
  background-color: #c0c0c0;
  color: white;
  border-radius: 5px;
}
.content {
  text-align: center;
  border-radius: 5px;
  background-color: darkblue;
}
ul {
  font-family: Georgia;
  text-decoration: none;
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  margin-top: -10px;
  margin-left: 10px;
}
a {
  text-decoration: none;
  color: white;
}
.div {
  width: 940px;
  height: 525px;
  margin: auto;
  border-radius: 5px;
  background-color: white;
  border: 5px solid darkblue;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}
img {
  width: 25px;
  height: 25px;
  padding-right: 10px;
}

<h1>NBA 2016</h1>
<p id="slogan"><i>Basketball never stops</i>
</p>
<div class="div">
  <div id="table">
    <h2 class="content">Atlantic</h2>
    <ul>
      <li>
        <img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/bos.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/bos/boston-celtics">Boston Celtics</a>
      </li>
      <li>
        <img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/bkn.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/bkn/brooklyn-nets">Brooklyn Nets</a>
      </li>
      <li>
        <img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/ny.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/ny/new-york-knicks">New York Knicks</a>
      </li>
      <li>
        <img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/phi.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/phi/philadelphia-76ers">Philadelphia 76ers</a>
      </li>
      <li>
        <img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/tor.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/tor/toronto-raptors">Toronto Raptors</a>
      </li>
    </ul>
  </div>
  <div id="table">
    <h2 class="content">Central</h2>
    <ul>
      <li>
        <img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/chi.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/chi/chicago-bulls">Chicago Bulls</a>
      </li>
      <li>
        <img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/cle.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/cle/cleveland-cavaliers">Cleveland Cavaliers</a>
      </li>
      <li>
        <img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/det.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/det/detroit-pistons">Detroit Pistons</a>
      </li>
      <li>
        <img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/ind.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/ind/indiana-pacers">Indiana Pacers</a>
      </li>
      <li>
        <img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/mil.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/mil/milwaukee-bucks">Milwaukee Bucks</a>
      </li>
    </ul>
  </div>
  <div id="table">
    <h2 class="content">Northwest</h2>
    <ul>
      <li>
        <img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/den.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/den/denver-nuggets">Denver Nuggets</a>
      </li>
      <li>
        <img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/min.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/min/minnesota-timberwolves">Minnesota Timberwolves</a>
      </li>
      <li>
        <img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/okc.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/okc/oklahoma-city-thunder">Oklahoma City Thunder</a>
      </li>
      <li>
        <img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/por.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/por/portland-trail-blazers">Portland Trail Blazers</a>
      </li>
      <li>
        <img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/utah.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/utah/utah-jazz">Utah Jazz</a>
      </li>
    </ul>
  </div>
  <div id="table">
    <h2 class="content">Pacific</h2>
    <ul>
      <li>
        <img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/gsw.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/gsw/golden-state-warriors">Golden State Warriors</a>
      </li>
      <li>
        <img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/lac.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/lac/los-angeles-clippers">LA Clippers</a>
      </li>
      <li>
        <img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/lal.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/lal/los-angeles-lakers">Los Angeles Lakers</a>
      </li>
      <li>
        <img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/pho.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/pho/phoenix-suns">Phoenix Suns</a>
      </li>
      <li>
        <img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/sac.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/sac/sacramento-kings">Sacramento Kings</a>
      </li>
    </ul>
  </div>
  <div id="table">
    <h2 class="content">Southeast</h2>
    <ul>
      <li>
        <img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/atl.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/atl/atlanta-hawks">Atlanta Hawks</a>
      </li>
      <li>
        <img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/cha.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/cha/charlotte-hornets">Charlotte Hornets</a>
      </li>
      <li>
        <img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/mia.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/mia/miami-heat">Miami Heat</a>
      </li>
      <li>
        <img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/orl.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/orl/orlando-magic">Orlando Magic</a>
      </li>
      <li>
        <img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/was.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/was/washington-wizards">Washington Wizards</a>
      </li>
    </ul>
  </div>
  <div id="table">
    <h2 class="content">Southwest</h2>
    <ul>
      <li>
        <img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/dal.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/dal/dallas-mavericks">Dallas Mavericks</a>
      </li>
      <li>
        <img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/hou.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/hou/houston-rockets">Houston Rockets</a>
      </li>
      <li>
        <img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/mem.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/mem/memphis-grizzlies">Memphis Grizzlies</a>
      </li>
      <li>
        <img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/no.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/no/new-orleans-pelicans">New Orleans Pelicans</a>
      </li>
      <li>
        <img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/sas.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/sas/san-antonio-spurs">San Antonio Spurs</a>
      </li>
    </ul>
  </div>
</div>

Rest of the code is on codepen link. There seems to be some padding or something on the top of my divs. There wasn't one until I used display: inline-block. I can fit in the title of each div but that would have to be done with setting the adequate margin to it. But I don't want to move gray area,I want it to be where it is because I tried to center it as much as possible. (Is there more efficient way to do it? I did it by calculating margins and dividing. Basically I want all margins to be the same (bottom,top,right,left)) I want title,along with the list to go a bit up to fit the gray area perfectly. How can I do it?

Answer 1

The issue you're facing is not caused by a padding, but a margin-top in your h2 element that exists by default. You can use the following CSS code to alleviate it:

.content {
  margin-top: 0;
}

Codepen: → here.

Snippet:

h1 {
  color: white;
  font-size: 90px;
  text-align: center;
  width: 950px;
  height: 100px;
  margin: auto;
  margin-top: 20px;
  border-radius: 5px;
  background-color: darkblue;
}

#slogan {
  font-size: 40px;
  text-align: center;
  margin: auto;
  margin-top: -3px;
  font-family: Agency FB;
  width: 940px;
  height: 50px;
  background-color: white;
  border: 5px solid darkblue;
}

#table {
  display: inline-block;
  width: 225px;
  height: 170px;
  margin-top: 59.25px;
  margin-left: 59.25px;
  text-align: left;
  background-color: #c0c0c0;
  color: white;
  border-radius: 5px;
}

.content {
  margin-top:0;
  text-align: center;
  border-radius: 5px;
  background-color: darkblue;
}

ul {
  font-family: Georgia;
  text-decoration: none;
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  margin-top: -10px;
  margin-left: 10px;
}

a {
  text-decoration: none;
  color: white;
}

.div {
  width: 940px;
  height: 525px;
  margin: auto;
  border-radius: 5px;
  background-color: white;
  border: 5px solid darkblue;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

img {
  width: 25px;
  height: 25px;
  padding-right: 10px;
}

</head>
<body>
<h1>NBA 2016</h1>
<p id="slogan"><i>Basketball never stops</i></p>
<div class="div">
    <div id="table">
    <h2 class="content">Atlantic</h2>
        <ul><li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/bos.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/bos/boston-celtics">Boston Celtics</a></li>
            <li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/bkn.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/bkn/brooklyn-nets">Brooklyn Nets</a></li>
            <li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/ny.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/ny/new-york-knicks">New York Knicks</a></li>
            <li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/phi.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/phi/philadelphia-76ers">Philadelphia 76ers</a></li>
            <li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/tor.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/tor/toronto-raptors">Toronto Raptors</a></li></ul>
    </div>
    <div id="table">
    <h2 class="content">Central</h2>
        <ul><li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/chi.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/chi/chicago-bulls">Chicago Bulls</a></li>
            <li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/cle.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/cle/cleveland-cavaliers">Cleveland Cavaliers</a></li>
            <li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/det.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/det/detroit-pistons">Detroit Pistons</a></li>
            <li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/ind.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/ind/indiana-pacers">Indiana Pacers</a></li>
            <li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/mil.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/mil/milwaukee-bucks">Milwaukee Bucks</a></li></ul>
    </div>
    <div id="table">
    <h2 class="content">Northwest</h2>
        <ul><li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/den.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/den/denver-nuggets">Denver Nuggets</a></li>
            <li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/min.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/min/minnesota-timberwolves">Minnesota Timberwolves</a></li>
            <li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/okc.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/okc/oklahoma-city-thunder">Oklahoma City Thunder</a></li>
            <li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/por.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/por/portland-trail-blazers">Portland Trail Blazers</a></li>
            <li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/utah.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/utah/utah-jazz">Utah Jazz</a></li></ul>
    </div>
    <div id="table">
    <h2 class="content">Pacific</h2>
        <ul><li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/gsw.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/gsw/golden-state-warriors">Golden State Warriors</a></li>
            <li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/lac.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/lac/los-angeles-clippers">LA Clippers</a></li>
            <li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/lal.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/lal/los-angeles-lakers">Los Angeles Lakers</a></li>
            <li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/pho.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/pho/phoenix-suns">Phoenix Suns</a></li>
            <li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/sac.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/sac/sacramento-kings">Sacramento Kings</a></li></ul>
    </div>
    <div id="table">
    <h2 class="content">Southeast</h2>
        <ul><li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/atl.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/atl/atlanta-hawks">Atlanta Hawks</a></li>
            <li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/cha.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/cha/charlotte-hornets">Charlotte Hornets</a></li>
            <li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/mia.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/mia/miami-heat">Miami Heat</a></li>
            <li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/orl.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/orl/orlando-magic">Orlando Magic</a></li>
            <li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/was.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/was/washington-wizards">Washington Wizards</a></li></ul>
    </div>
    <div id="table">
    <h2 class="content">Southwest</h2>
        <ul><li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/dal.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/dal/dallas-mavericks">Dallas Mavericks</a></li>
            <li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/hou.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/hou/houston-rockets">Houston Rockets</a></li>
            <li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/mem.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/mem/memphis-grizzlies">Memphis Grizzlies</a></li>
            <li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/no.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/no/new-orleans-pelicans">New Orleans Pelicans</a></li>
            <li><img style="vertical-align:middle" src="http://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/sas.png&h=25&w=25"><a href="http://www.espn.com/nba/team/_/name/sas/san-antonio-spurs">San Antonio Spurs</a></li></ul>
    </div>
</div>
</body>
</html>

Answer 2

You just need to remove the margin from the content header. You can target a specific margin using the top,left, right or bottom. In this case you need to target the margin-top of the h2 tag.

.content {
    text-align:center;
    border-radius:5px;
    background-color:darkblue;
    margin-top:0; /*This is the added property*/
}

Is this what you're looking for? https://codepen.io/anon/pen/ZOwEGE

Also it's a good idea to use the web inspector (F12) in the browser to find out whats affecting your elements.

Answer 3

If I understand you well, you want something lie this:

https://codepen.io/bra1N/pen/YWBzXx

CSS:

h1 {
    color: white;
    font-size: 90px;
    text-align: center;
    width: 1048px;
    height: 100px;
    margin: auto;
    margin-top: 20px;
    border-radius: 5px;
    background-color: darkblue;
}

#slogan {
    font-size: 40px;
    text-align: center;
    margin: auto;
    margin-top: -3px;
    font-family: Agency FB;
    width: 1040px;
    height: 50px;
    background-color: white;
    border: 5px solid darkblue;
}

#table {
    display: inline-block;
    width: 225px;
    height: 170px;
    margin-top: 59.25px;
    margin-left: 59.25px;
    text-align: left;
    background-color: #c0c0c0;
    color: white;
    padding: 20px;
    border-radius: 5px;
}

.content {
    text-align: center;
    border-radius: 5px;
    background-color: darkblue;
}

ul {
    font-family: Georgia;
    text-decoration: none;
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    margin-top: -10px;
    margin-left: 10px;
}

a {
    text-decoration: none;
    color: white;
}

.div {
    width: 1040px;
    height: 525px;
    margin: auto;
    border-radius: 5px;
    background-color: white;
    border: 5px solid darkblue;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

img {
    width: 25px;
    height: 25px;
    padding-right: 10px;
}

Answer 4

There is a default margin on the h2 element.

When you remove the top margin from the h2 element, you get the desired result.

CSS

h2 {
  margin-top: 0;
}

Codepen link