在下面的代码片段中,为什么
我已经给背景着色,这样你就可以清楚地看到间距有问题了,尽管所有3个元素具有相同的外边距...
h2
和p
的外边距会重叠,但p
和button
的外边距却不会呢?我已经给背景着色,这样你就可以清楚地看到间距有问题了,尽管所有3个元素具有相同的外边距...
body {
position: relative;
width: 100vw;
height: 100vh;
}
#textContainer {
position: relative;
top: 50%;
transform: translateY(-50%);
}
#textContainer>* {
position: relative;
margin: 15px 0;
background-color: blue;
color: #fff;
}
button {
background-color: transparent;
border: 2px solid rgb(51, 51, 51);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="textContainer" class="col-xs-6">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc con non. Proin ut lacus sodales, rutrum mi vel, faucibus lacus. </p>
<button type="button" class="btn btn-default btn-lg">faucibus lacus</button>
</div>
button
元素默认为行内块,因此边距在垂直方向上不会折叠。 - Josh Crozier