段与高度自动

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>