调整高度时，内容会低于按钮

Question

我花了几个小时（8岁以上）。我是Less的新手，并尝试在bootstrap.less中调整此按钮的高度。

由于某种原因，X没有留在按钮内。

<div class="modal fade" id="listen-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <button type="button" class="bootbox-close-button" data-dismiss="modal" aria-label="Close" ><span aria-hidden="true">&times;</span></button>
            <div class="modal-body">




.bootbox-close-button {
    color: red;
    background-color:white;
    float:right;
    margin-top:15px;
    margin-right:5px;
    position:relative;
    font-size:30px;
    z-index: 3;
    height:20px;
}
.bootbox-close-button>span{
  padding:0px;
}
.bootbox-close-button:hover {
   font-weight: bold;
}

Answer 1

问题实际上是3个属性的组合，即font-size，height和line-height（尽管最后一个未明确设置， 即问题的来源 ）。如果未在任何元素上明确设置line-height，则默认值（{1}}将由用户代理应用，以下是specs关于如何{{1}的说法解释。

  

正常值＆＃39;设置＆＃39;行高＆＃39;到元素字体的合理值。建议UA设置正常的＆＃39; value是一个1.0到1.2范围内的数字。

     

当指定数值时，行高由当前元素的字体大小乘以数值给出。

因此，计算出的normal总是很可能超过（或至少等于字体的大小）。在这种情况下，计算出的normal似乎大约为34px（基于字体大约为1.1倍）。由于line-height超过了line-height，因此文字会在下方推送。

以下是line-height影响块元素格式化的an extract from the spec：

  

＆＃39;行高＆＃39;可能小于文本的高度，在这种情况下，前导将为负。

在下面的代码段中，我添加了一个按钮，并且比按钮的height小了line-height，您现在可以看到它在按钮中的位置，因为领先是否定的。

＆＃13;

＆＃13;

line-height

＆＃13;

height

＆＃13;

＆＃13;

＆＃13;

您需要在按钮中获取文字的其他选项是（a）设置比.bootbox-close-button { color: red; background-color: white; float: right; margin-top: 15px; margin-right: 5px; position: relative; font-size: 30px; z-index: 3; height: 20px; } .bootbox-close-button:nth-of-type(1) { line-height: 16px; /* add this */ } .bootbox-close-button>span{ padding: 0px; } .bootbox-close-button:hover { font-weight: bold; } * <div class="modal fade" id="listen-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <button type="button" class="bootbox-close-button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> </button> <button type="button" class="bootbox-close-button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> </button> <div class="modal-body"> Some content </div> </div> </div> </div>更小的font-size，但这会使交叉看起来更小（ b）不要将任何height设置为按钮，但这会使按钮看起来更大。

Answer 2

似乎它显示了您将其设置为高度的按钮（20px）。您可以将其更改为更大的数字并设置为span上的浮动，以确保它加入相同的内容流。