html - CSS 中的双正方形

Question

我尝试创建 19 个正方形，第一个双倍尺寸。

正方形:宽度:9.09%；填充:2.27% 0；。所以，我用了第一个 width: 18.18%;填充:4.54% 0；。但没有比其他人高一倍。

这是一个 JSFiddle .

padding 的正确百分比是多少？为什么不是 4.54？

Answer 1

您忘了注意文本使用的行高。

您可以将其重置为 0:http://jsfiddle.net/ooLzq85o/1/

.button {
    color: #fff;
    display: inline-block;
    text-align: center;
    vertical-align: top;
    float: left;
    width: 9.09%;
	padding: 4.5% 0;
    background: maroon;
    line-height:0;
}
.double {
    width: 18.18%;
	padding: 9% 0;
    background: red;
}

<div id="buttons">
    <div class="button double">1</div>
    <div class="button">2</div>
    <div class="button">3</div>
    <div class="button">4</div>
    <div class="button">5</div>
    <div class="button">6</div>
    <div class="button">7</div>
    <div class="button">8</div>
    <div class="button">9</div>
    <div class="button">10</div>
    <div class="button">11</div>
    <div class="button">12</div>
    <div class="button">13</div>
    <div class="button">14</div>
    <div class="button">15</div>
    <div class="button">16</div>
    <div class="button">17</div>
    <div class="button">18</div>
    <div class="button">19</div>
</div>