在段落中添加细微差距

Question

我理解p的工作原理但有机会，如何在新文本行之间添加<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="col-md-4"> <h2 class="text-center">Heading</h2> <p class="text-center">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.Donec sed odio dui.Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p> <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a> </p> </div>内的微小差距。

这是。

FindsBy[]

Answer 1

您可以通过设置line-height元素的<p>属性来增加每行的高度，例如：

＆＃13;

＆＃13;

p {
  font-size: 1em;
  line-height: 2em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-4">
  <h2 class="text-center">Heading</h2>
  <p class="text-center">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.Donec sed odio dui.Donec id elit non mi
    porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.Donec id elit non mi porta gravida at
    eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
  <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a>
  </p>
</div>

＆＃13;

＆＃13;

＆＃13;

要增加前一行的降序字符与后续行的升序部分之间的空间，只需确保line-height属性大于font-size属性。虽然您不必指定line-height的单位，例如：

＆＃13;

＆＃13;

p {
  font-size: 1em;
  line-height: 2;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-4">
  <h2 class="text-center">Heading</h2>
  <p class="text-center">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.Donec sed odio dui.Donec id elit non mi
    porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.Donec id elit non mi porta gravida at
    eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
  <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a>
  </p>
</div>

＆＃13;

＆＃13;

＆＃13;

在这种情况下，line-height属性充当乘数，而不是特定长度。

Answer 2

要增加行之间的间距，您需要使用line-height，因此请将其添加到p

默认情况下，Bootstrap不会设置line-height，这意味着根据元素的font-size计算。

在这种情况下，如果p 14px继承自body，则line-height将16.9px

您设置的值必须始终高于font-size才能获得所需的效果（可以单位或无单位）

p {
  line-height: 3em /* choose what you prefer here */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-4">
  <h2 class="text-center">Heading</h2>
  <p class="text-center">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.Donec sed odio dui.Donec id elit non mi
    porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.Donec id elit non mi porta gravida at
    eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
  <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a>
  </p>
</div>

Answer 3

这应该

p{
 line-height:1px;
}