Question

我在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;
}

请帮助我如何解决此问题。

Answer 1

您成为受害者的后果称为崩溃边距。这是一个非常简化的示例：

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/

当我们在文本上添加上边距时，它会在div而非文本上添加边距

1 个答案: