为啥我的 margin-top 会将整个部分向下移动？ [复制]
Posted
技术标签:
【中文标题】为啥我的 margin-top 会将整个部分向下移动？ [复制]【英文标题】：Why does my margin-top move the entire section down? [duplicate]为什么我的 margin-top 会将整个部分向下移动？ [复制] 【发布时间】：2021-07-05 08:15:31 【问题描述】：我制作了两个单独的部分，一个用于图像滑块，另一个用于“关于我们”部分，它更像是一个前置页脚，但是，每当我给出“关于我们”部分中的文本是页边距顶部，它会向下推整个“关于我们”部分，而不仅仅是文本，关于如何解决这个问题的任何想法？
.img-slider-section
border-bottom: 1px solid rgb(15, 13, 13);
border-top: 1px solid rgb(15, 13, 13);
.slider
position: relative;
overflow: hidden;
height: 100vh;
width: 100vw;
color: #fff;
.slide
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.4s ease-in-out;
margin-top: 1em;
.slide.current
opacity: 1;
.slide .content
position: absolute;
bottom: 70px;
left: -600px;
opacity: 0;
width: 600px;
background-color: rgba(29, 28, 28, 0.945);
border: 1px solid red;
border-radius: 5px;
color: rgb(3, 3, 3) transparent;
padding: 35px;
.slide .content h1
margin-bottom: 10px;
color: red;
font-family: 'Cinzel Decorative',sans-serif;
.content p
font-family: 'Cinzel Decorative',sans-serif;
.slide.current .content
opacity: 1;
transform: translateX(600px);
transition: all 0.7s ease-in-out 0.3s;
.buttons button#next
position: absolute;
top: 210%;
right: 15px;
.buttons button#prev
position: absolute;
top: 210%;
left: 12px;
.buttons button
border: 2px solid rgb(129, 7, 7);
background-color: transparent;
color: rgb(255, 0, 0);
cursor: pointer;
padding: 13px 15px;
outline: none;
.buttons button:hover
background-color: rgba(255, 0, 0, 0.774);
color: rgba(255, 255, 255, 0.863);
transition: 0.3s ease;
.buttons button:not(:hover)
transition: 0.3s ease;
/* FOOTER */
.pre-footer
width: 100%;
height: 25vh;
background: #fff;
.about-us
font-family: 'Oswald',sans-serif;
text-align: center;
width: 50%;
margin: 0 auto;
.ABOUT-H
font-family: 'Cinzel Decorative',sans-serif;
font-weight: 700;
.ABOUT-text
font-family: 'Oswald',sans-serif;
/* Background Images */
.slide:first-child
background: url('../IMG/background-image-1.jpg') no-repeat
center top/cover;;
.slide:nth-child(2)
background: url('../IMG/background-image-2.jpg') no-repeat
center top/cover;
.slide:nth-child(3)
background: url('../IMG/background-image-3.jpg') no-repeat
center top/cover;
.slide:nth-child(4)
background: url('../IMG/background-image-4.jpg') no-repeat
center top/cover;
.slide:nth-child(5)
background: url('../IMG/background-image-5.jpg') no-repeat
center top/cover;
.slide:nth-child(6)
background: url('../IMG/background-image-6.png') no-repeat
center center/cover;
<section class="img-slider-section">
<div class="slider">
<div class="slide current">
<div class="content">
<h1>CHALLENGING GAMEPLAY</h1>
<p>
No two DEVOUR playthroughs are ever the same. To stop Anna, you’ll need a focused team and perfect execution, with a single session lasting up to an hour.
</p>
</div>
</div>
<div class="slide">
<div class="content">
<h1>REPLAYABILITY</h1>
<p>
Locked doors, goats and item spawns are randomized, ensuring that no two games are the same. What's more, DEVOUR's unpredictable AI ups the game, making you second guess each and every move.
</p>
</div>
</div>
<div class="slide">
<div class="content">
<h1>ESCALATING DIFFICULTY</h1>
<p>
Anna's rage and speed increase as the game progresses, as does the number of demons Azazel spawns to stop you. Your only means of defence is your UV flashlight.
</p>
</div>
</div>
<div class="slide">
<div class="content">
<h1>MULTIPLAYER FEATURES</h1>
<p>
Make use of our in-game positional voice chat. Bring friends, or find other players using the server browser.
</p>
</div>
</div>
<div class="slide">
<div class="content">
<h1>EXORCISE ANNA</h1>
<p>
Your goal is to break Azazel's hold over Anna. To do this you'll need to find gasoline, a fire pit, and enough ritual goats to burn.
</p>
</div>
</div>
<div class="slide">
<div class="content">
<h1>NIGHTMARE MODE</h1>
<p>
Beat the game without breaking a sweat? Try Nightmare mode for the ultimate challenge.
</p>
</div>
</div>
</div>
<div class="buttons">
<button id="prev"><i class="fas fa-arrow-left"></i></button>
<button id="next"><i class="fas fa-arrow-right"></i></button>
</div>
</section>
<div class="pre-footer">
<div class="about-us">
<h2 class="ABOUT-H">ABOUT STRAIGHT BACK GAMES</h2>
<p class="ABOUT-text">DEVOUR is the second game from Straight Back Games, an independent game developer started in 2019 by Joe Fender and Luke Fanning. The developers' passion for frustratingly difficult games and exciting co-op experiences was the drive behind its creation. Collaborators also include family members Andrew Fender (puzzle design), Hannah Headden (story and script) and Peter Fender (original music score).</p>
</div>
</div>
<script src="JS/main.js"></script>
</body>正常的样子
margin-top 的外观
【问题讨论】：
【参考方案1】：您所观察到的称为 collapsing margins，这是一个相当令人困惑、难以理解的 CSS 功能，几十年来一直让 Web 开发人员头疼。
看这个简单的例子：
.parent
background-color: #ddd;
height: 400px;
width: 400px;
.child
background-color: #666;
height: 200px;
margin-top: 100px;
width: 200px;
<div class="parent">
<div class="child"></div>
</div>如您所见，子代的margin-top 并没有像人们预期的那样将子代100px 推到父代内部，而是将边距转换为父代，将父级向下推 100px 并保持子级相对于父级的位置不变。
解决此问题的标准方法是为父级提供最小的padding-top（这将防止发生边距折叠）：
.parent
background-color: #ddd;
height: 400px;
padding-top: 1px;
width: 400px;
.child
background-color: #666;
height: 200px;
margin-top: 99px;
width: 200px;
<div class="parent">
<div class="child"></div>
</div>【讨论】：
以上是关于为啥我的 margin-top 会将整个部分向下移动？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章
为啥无边框的 Kivy Window 会将内容向下和向右移动？
css排版时出现：里面的div设置margin-top值时外面div会向下移动相应距离这是为啥 请哪位高手帮帮忙