如何避免重疊元素

Question

Demo

我注意到一些時間元素重疊我不知道why.i已刪除的利潤從頂部元素（p標籤），所以也沒有辦法，這是保證金collapse.so它究竟是什麼？

我可以通過添加display:inline-block來解決這個問題，但有沒有更好的方法可以避免這種情況？

.ui-btn { 
 
    border: 2px solid #ffffff; 
 
    border-radius: 30px; 
 
    background-color: #18aff4; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    font-size: 18px; 
 
    color: white; 
 
    padding: 18px; 
 
} 
 

 
p { 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div class="text"> 
 
    <p ">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It 
 
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 

 
    <a class="ui-btn ">Sign up</a> 
 
</div>

Answer 1

您可以添加到display: inline-block;款.ui-btn後顯示。

<style type="text/css"> 
 
.ui-btn { 
 
    border: 2px solid #ffffff; 
 
    border-radius: 30px; 
 
    background-color: #18aff4; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    font-size: 18px; 
 
    color: white; 
 
    padding: 18px; 
 
    display: inline-block; 
 
} 
 
p{ 
 
    margin: 0; 
 
    padding:0; 
 
} 
 
</style> 
 

 
<div class="text"> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It 
 
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 

 
    <a class="ui-btn">sign up</a> 
 
</div>

Answer 2

.ui-btn { 
 
    border: 2px solid #ffffff; 
 
    border-radius: 30px; 
 
    background-color: #18aff4; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    font-size: 18px; 
 
    color: white; 
 
    padding: 18px; 
 
} 
 
p{ 
 
    margin:0; 
 
    padding:0; 
 
    margin-bottom:40px; 
 
}

<div class="text"> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It 
 
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 

 
    <a class="ui-btn">sign up</a> 
 
</div>

上<a>標籤填充沒有算作一個空間。所以添加一個p{margin-bottom:40px;}到你的<p>會在它之間產生差距。

Answer 3

默認情況下，錨標籤是內聯標籤賦予float：left;在CSS

.ui-btn { 
    border: 2px solid #ffffff; 
    border-radius: 30px; 
    background-color: #18aff4; 
    font-weight: bold; 
    text-align: center; 
    font-size: 18px; 
    color: white; 
    padding: 18px; 
    float: left; 
} 

Answer 4

你可以使用任何margin-bottom，float，inline-block但</br>工作過。

.ui-btn { 
 
    border: 2px solid #ffffff; 
 
    border-radius: 30px; 
 
    background-color: #18aff4; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    font-size: 18px; 
 
    color: white; 
 
    padding: 18px; 
 
} 
 

 
p { 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div class="text"> 
 
    <p ">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It 
 
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
</br> 
 
    <a class="ui-btn ">Sign up</a> 
 
</div>