<分区>
<分区>
我在 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/
关于html - 当我们向文本添加上边距时，它会向 div 而不是文本添加边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52171679/