Question

我一直想知道在div中放置文本的'最佳'方法是什么

1）在文本周围的元素上添加填充，并从元素的高度/宽度减去填充。

<div class="button">
    Activate
</div><!-- button -->

.button
{
    height: 20px;   /* -10px from padding for text */
    width: 90px;    /* -10px from padding for text */
    padding-left:10px;
    padding-right:10px; 
}

2）在文本周围放置一个范围，并将其定位为自己的元素。

<div class="button2">
    <span class="button2-text">
        Activate
    </span>
</div><!-- button2 -->

.button2
{
    height: 30px
    width: 100px
}
.button2-text
{
    padding-left:10px;
    padding-top:10px;
}

我总是选择1）因为它的代码较少，但我觉得2）更合适或者想知道如果我以任何方式使用方法1都是错误的。

Answer 1

您的第二个选项不会将高度/宽度与填充混合。

现在浏览器都遵循相同的盒子模型（这是你在选项1中的位置）。这相当于拥有box-sizing: content-box。

最多6个版本的Internet Explorer版本和Quirks模式没有使用另一个版本，其中包含填充作为宽度的一部分，相当于box-sizing: border-box。

为了正确定位两个模型，使用选项2是最安全的。

如果您选中http://jsfiddle.net/stb5a/，则box-sizing设置为content-box。将其更改为border-box不会改变文本的位置;

所以基本上，选项2将用于与旧版本的Internet Explorer（现在已经不复存在）兼容，以及用于编写这些版本的开发人员，使用与他们一直相同的模式。

Answer 2

最好的方法是使用<button>

jsBin demo

<button class="button">Activate</button>

CSS：

  .button{
    border: 1px solid #888;
    background:#eee;
    padding:5px 30px;
    border-radius:4px;
  }

你将有空闲时间玩颜色：）

Answer 3

我会选1）。在2）<span>标签在语义上是无用的。除非<div>内没有其他内容，否则不要与您的标记相符。

KISS - 保持简单愚蠢

在DIV按钮中居中文本的正确方法是什么

3 个答案:

jsBin demo