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

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">Boston Celtics
</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">Brooklyn Nets
</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">New York Knicks
</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">Philadelphia 76ers
</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">Toronto Raptors
</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">Chicago Bulls
</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">Cleveland Cavaliers
</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">Detroit Pistons
</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">Indiana Pacers
</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">Milwaukee Bucks
</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">Denver Nuggets
</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">Minnesota Timberwolves
</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">Oklahoma City Thunder
</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">Portland Trail Blazers
</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">Utah Jazz
</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">Golden State Warriors
</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">LA Clippers
</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">Los Angeles Lakers
</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">Phoenix Suns
</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">Sacramento Kings
</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">Atlanta Hawks
</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">Charlotte Hornets
</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">Miami Heat
</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">Orlando Magic
</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">Washington Wizards
</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">Dallas Mavericks
</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">Houston Rockets
</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">Memphis Grizzlies
</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">New Orleans Pelicans
</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">San Antonio Spurs
</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

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

Answer 2

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">Boston Celtics</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">Brooklyn Nets</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">New York Knicks</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">Philadelphia 76ers</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">Toronto Raptors</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">Chicago Bulls</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">Cleveland Cavaliers</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">Detroit Pistons</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">Indiana Pacers</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">Milwaukee Bucks</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">Denver Nuggets</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">Minnesota Timberwolves</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">Oklahoma City Thunder</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">Portland Trail Blazers</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">Utah Jazz</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">Golden State Warriors</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">LA Clippers</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">Los Angeles Lakers</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">Phoenix Suns</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">Sacramento Kings</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">Atlanta Hawks</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">Charlotte Hornets</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">Miami Heat</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">Orlando Magic</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">Washington Wizards</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">Dallas Mavericks</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">Houston Rockets</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">Memphis Grizzlies</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">New Orleans Pelicans</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">San Antonio Spurs</li></ul>
</div>
</div>
</body>
</html>

Answer 3

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 4

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