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>
&#13;
其余代码在codepen链接上。在我的div上面似乎有一些填充或某些东西。在我使用display: inline-block
之前,没有一个。我可以适应每个div的标题,但必须通过设置足够的余量来完成。但是我不想移动灰色区域,我希望它能够存在,因为我试图尽可能地将它居中。 (有更有效的方法吗?我通过计算边距和分割来做到这一点。基本上我希望所有边距都相同(底部,顶部,右边,左边))我想要标题,以及列表稍微有点完美地适应灰色区域。我该怎么办?
答案 0 :(得分:3)
答案 1 :(得分:2)
您遇到的问题不是由 padding
引起的,而是 {{1}中的 margin-top
} 默认存在的元素。您可以使用以下CSS代码来缓解它:
h2
Codepen:→here。
<强>段:强>
.content {
margin-top: 0;
}
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;
}
答案 2 :(得分:1)
您只需要从内容标题中删除边距即可。您可以使用顶部,左侧,右侧或底部来定位特定边距。在这种情况下,您需要定位h2标签的margin-top。
.content {
text-align:center;
border-radius:5px;
background-color:darkblue;
margin-top:0; /*This is the added property*/
}
这是你正在寻找的吗? https://codepen.io/anon/pen/ZOwEGE
在浏览器中使用Web检查器(F12)也可以找出影响元素的最新信息。
答案 3 :(得分:1)
如果我理解你,你想要一些谎言:
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;
}