Question

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

我试图在其中创建一个小用户评论div元素是lorem占位符文本，我尝试将高度设置为auto，文本忽略div并超出它。

这是由于我的中心代码

margin: 0 auto;

或者可能是

的使用

transform: translateY();

Answer 1

在您引用div的内部，您有一个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{
	margin-bottom: 0;
}
.contents {
  font-family: "Robto", Arial;
}

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

Answer 2

这是因为您的文字位于<div class='circle'>内，其固定高度为100px。

您只需将<p>标记移出<div class='circle'>并将其放入<div class="container">即可。尝试运行下面的代码段，或查看 CodePen Demo ：

＆＃13;

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

＆＃13;

<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>

＆＃13;

我还在text-align: center;元素上设置.contents，以便文本在容器内部具有良好的中心对齐。

在高度自动的Div之外的段落

2 个答案: