这个问题在这里已有答案：
我有一个关于reactjs的应用程序，当我为文本添加边距时，它会为div增加边距并且主div向下移动。 JSX代码：
import React, {Component} from 'react';
import './Travel.css';
class Travel extends Component {
render(){
return(
<div className='top'>
<div className='content'>
<span className='conth'>
<h1>A TRAVELS</h1>
<h1>YEARBOOK</h1>
</span>
</div>
</div>
);
}
}
export default Travel;
CSS Code:
@import url(//fonts.googleapis.com/css?family=Open+Sans:800);
.top{
height:789px;
width: 100%;
background-image: url('travel.jpg');
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
}
.content h1{
margin-top: 10px;
}
.conth{
font-family: 'Open Sans';
font-size: 43px;
width: 500px;
color: #ffffff;
}
请帮我解决这个问题。
你已经成为受害者的影响被称为崩溃边缘。这是一个非常简单的例子：
body {
min-height: 100vh;
min-width: 100vw;
}
.outside {
background-color: red;
height: 300px;
margin-top: 0;
width: 400px;
}
.inside {
background-color: orange;
margin-top: 200px;
height: 50%;
}<body>
<div class="outside">
<div class="inside"></div>
</div>
</body>要防止这种情况，只需将最小的padding-top添加到.outer：
body {
min-height: 100vh;
min-width: 100vw;
}
.outside {
background-color: red;
height: 300px;
margin-top: 0;
padding-top: 1px;
width: 400px;
}
.inside {
background-color: orange;
margin-top: 200px;
height: 50%;
}<body>
<div class="outside">
<div class="inside"></div>
</div>
</body>CSS Tricks有一篇很好的文章：
https://css-tricks.com/what-you-should-know-about-collapsing-margins/