段與高度自動

Question

Codepen鏈接：https://codepen.io/cadegord/pen/qXMzBZ?editors=1111

我試圖使這裏面一點用戶評價的div元素LOREM佔位符文本，我試着和高度設置爲自動和文本忽略div並且超出它。

這是由於

margin: 0 auto; 

我定心代碼或在裏面你引用div也可能是使用的

transform: translateY(); 

Answer 1

這是因爲你有<div class='circle'>裏面的文字，其中有100px固定高度。

您可以將<p>標記移出<div class='circle'>並將其置於<div class="container">中。嘗試運行下面的代碼片段，或者看看這個CodePen Demo：

body { 
 
    margin-top: 10%; 
 
    @import url('https://fonts.googleapis.com/css?family=Roboto'); 
 
} 
 

 
.container { 
 
    border: 2px solid #DFE0E2; 
 
    box-shadow: 5px 5px #A2AEBB; 
 
    border-radius: 30px; 
 
    margin: 0px auto; 
 
    width: 500px; 
 
    min-height: auto; 
 
    background-color: white; 
 
    margin-bottom: 30px; 
 
} 
 

 
.circle { 
 
    margin: auto; 
 
    background: linear-gradient(to right, #20A39E, #7FE6A2); 
 
    height: 100px; 
 
    width: 100px; 
 
    border-radius: 50%; 
 
    transform: translateY(-100px); 
 
} 
 

 
.quote { 
 
    font-size: 100px; 
 
    text-align: center; 
 
    color: white; 
 
    transform: translateY(5px); 
 
} 
 

 
.contents { 
 
    font-family: "Robto", Arial; 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <div class="circle"> 
 
    <h1 class="quote">「</h1> 
 

 
    </div> 
 
    <p class="contents">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem quod reprehenderit, accusantium architecto voluptatum voluptates aut aliquam magnam.</p> 
 
</div>

我還設置text-align: center;您.contents元素使得文本具有容器內一個漂亮的中心對齊。

Answer 2

你有一個h1標記，有邊距

刪除報價div內的h1保證金將解決您的問題

.quote h1{ 
    margin-bottom: 0; 
} 

body{ 
 
    margin-top: 10%; 
 
    @import url('https://fonts.googleapis.com/css?family=Roboto'); 
 
} 
 

 
.container { 
 
    border: 2px solid #DFE0E2; 
 
    box-shadow: 5px 5px #A2AEBB; 
 
    border-radius: 30px; 
 
    margin: 0px auto; 
 
    width: 500px; 
 
    min-height: 400px; 
 
    background-color: white; 
 
    margin-bottom: 30px; 
 
} 
 

 
.circle { 
 
    margin: auto; 
 
    background: linear-gradient(to right, #20A39E, #7FE6A2); 
 
    height: 100px; 
 
    width: 100px; 
 
    border-radius: 50%; 
 
    transform: translateY(-100px); 
 
} 
 

 
.quote { 
 
    font-size: 100px; 
 
    text-align: center; 
 
    color: white; 
 
    transform: translateY(5px); 
 
} 
 
.quote h1{ 
 
\t margin-bottom: 0; 
 
} 
 
.contents { 
 
    font-family: "Robto", Arial; 
 
}

<div class="container"> 
 
\t <div class="circle"> 
 
    \t <h1 class="quote">「</h1> 
 
\t \t <p class="contents">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem quod reprehenderit, accusantium architecto voluptatum voluptates aut aliquam magnam.</p> 
 
    \t </div> 
 
</div>