部分有一个边距底部和顶部的100px
问题描述：
我想完成的是我希望我的部分有100px（顶部和底部）的边距，但我的页脚似乎并不尊重这一点。另外我想要一个解释，因为我对这个真的很陌生。部分有一个边距底部和顶部的100px
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
header {
background-color: #191919;
position: fixed;
width: 100%;
float: left;
color: #edf9ff;
min-height: 10px;
border-bottom: #0fe216 3px solid;
display: flex;
align-items: center;
justify-content: space-between;
}
header a {
text-decoration: none;
text-transform: uppercase;
color: #edf9ff;
}
a:hover {
color: blue;
}
header ul {
margin: 0;
}
header li {
list-style-type: none;
float: left;
padding-right: 20px;
}
#showtime {
position: relative;
top: 110px;
width: 80%;
margin: 0 auto;
background-color: #f2f2f2;
z-index: 8;
}
#showtime img {
width: 300px;
height: 300px;
}
/*Image Repz*/
.showright {
clear: both;
}
.highlight {
font-size: 125%;
color: blue;
}
.showright img {
float: right;
clear: both;
}
.boxes:first-child {
padding-top: 50px;
}
.boxes:not(:first-child) {
padding-top: 100px;
}
.showright>p,
.showright>h2 {
text-align: center;
}
.showleft img {
float: left;
clear: both;
}
.showleft>p,
.showleft>h2 {
text-align: center;
}
footer {
margin-top: 30px;
background-color: #191919;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
clear: both;
margin-top: 120px;
z-index: 6;
}
footer p {
text-align: center;
color: white;
}
.d-inline-flex {
display: inline-flex;
align-items: center;
}<!DOCTYPE html>
<html>
<head>
<title>Photography | Home </title>
<link href="About.css" rel="stylesheet" />
<script type="application/javascript" src="Home.js"></script>
</head>
<body>
<header>
<div class="d-inline-flex">
<div id="branding">
<h2>PHOTOGRAPHY</h2>
</div>
<nav id="links">
<ul>
<li><a href="Home.html">Home</a></li>
<li><a href="About.html">About</a></li>
<li><a href="PhotoGallery.html">PHOTO GALLERY</a></li>
<li><a href="VideoGallery.html">VIDEO GALLERY</a></li>
</ul>
</nav>
</div>
<a href="#">LOGIN</a>
</header>
<section id="showtime">
<div class="showleft boxes">
<h2>What are we about?</h2>
<p>In Mukhtar Photography, we specialise in creating a perfect video with the highest quality and we always tend to keep our promise. Whether it is an Video or not we are <span class="highlight">MASTERS</span> at delivering the best photos
</p>
</div>
<div class="showleft boxes">
<h2>Why should you ask Mukhtar Photography for like: Weddings, videos?</h2>
<p>Because we put our dedication towards and is very unlikely to be any cancels to the project and if there is you will be paid 90% of the money you gave us.
</p>
</div>
</section>
<footer>
<p>Note that any copyright © is reserved</p>
</footer>
</body>
</html>
答
1）你的头有position: fixed - 你需要添加至少top: 0修复它TT窗口的顶部。并且添加一个z-索引，高于应该落在它后面的元素的z-索引。
2.）您的部分有position: relative。在这种情况下，top: 110px只是使其向下移动110px，但其原始空间将被保留。所以它会重叠在它下面。要解决这个问题，请使用margin-top: 110px" instead. In combination with your existing margin：0 auto that adds up to margin：110px auto 0 auto; If you want a bottom margin, add that too. Then it's enough to write the shorthand保证金：110px汽车;`
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
header {
background-color: #191919;
position: fixed;
top: 0;
width: 100%;
color: #edf9ff;
min-height: 10px;
border-bottom: #0fe216 3px solid;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 100;
}
header a {
text-decoration: none;
text-transform: uppercase;
color: #edf9ff;
}
a:hover {
color: blue;
}
header ul {
margin: 0;
}
header li {
list-style-type: none;
float: left;
padding-right: 20px;
}
#showtime {
position: relative;
margin: 110px auto 0 auto;
width: 80%;
background-color: #f2f2f2;
z-index: 8;
}
#showtime img {
width: 300px;
height: 300px;
}
/*Image Repz*/
.showright {
clear: both;
}
.highlight {
font-size: 125%;
color: blue;
}
.showright img {
float: right;
clear: both;
}
.boxes:first-child {
padding-top: 50px;
}
.boxes:not(:first-child) {
padding-top: 100px;
}
.showright>p,
.showright>h2 {
text-align: center;
}
.showleft img {
float: left;
clear: both;
}
.showleft>p,
.showleft>h2 {
text-align: center;
}
footer {
margin-top: 30px;
background-color: #191919;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
clear: both;
margin-top: 120px;
z-index: 6;
}
footer p {
text-align: center;
color: white;
}
.d-inline-flex {
display: inline-flex;
align-items: center;
}<!DOCTYPE html>
<html>
<head>
<title>Photography | Home </title>
<link href="About.css" rel="stylesheet" />
<script type="application/javascript" src="Home.js"></script>
</head>
<body>
<header>
<div class="d-inline-flex">
<div id="branding">
<h2>PHOTOGRAPHY</h2>
</div>
<nav id="links">
<ul>
<li><a href="Home.html">Home</a></li>
<li><a href="About.html">About</a></li>
<li><a href="PhotoGallery.html">PHOTO GALLERY</a></li>
<li><a href="VideoGallery.html">VIDEO GALLERY</a></li>
</ul>
</nav>
</div>
<a href="#">LOGIN</a>
</header>
<section id="showtime">
<div class="showleft boxes">
<h2>What are we about?</h2>
<p>In Mukhtar Photography, we specialise in creating a perfect video with the highest quality and we always tend to keep our promise. Whether it is an Video or not we are <span class="highlight">MASTERS</span> at delivering the best photos
</p>
</div>
<div class="showleft boxes">
<h2>Why should you ask Mukhtar Photography for like: Weddings, videos?</h2>
<p>Because we put our dedication towards and is very unlikely to be any cancels to the project and if there is you will be paid 90% of the money you gave us.
</p>
</div>
</section>
<footer>
<p>Note that any copyright © is reserved</p>
</footer>
</body>
</html>
答
您需要删除
Position: relative;
形式#showtime元素，因为你已经设置的位置相对，并给予最高性能的一些值，即100px，将其从流中取出并放置在离顶部100px处;这就是页脚不尊重它的原因。
我投票结束这个问题作为题外话，因为这是一个常问问题有关“边缘崩溃”，并在整个SO和互联网答案。请在此处搜索该词汇或Google。 – Rob