html - 添加文本后正方形的大小会发生变化

Question

这是 HTML:

<a href="#" class="square1"></a>

那个对应的css是:

a.square1
{
    width: 50%;
    height: 50%;
    border: 1px solid transparent;
    padding: 9%;
    margin-top: 0%;
    background-color: #FAFAFA;
    opacity: 0.5;
}

当我尝试将文本放入其中时，正方形的大小发生了变化。我怎样才能避免这种情况？

Answer 1

首先，你的 anchor 元素不是正方形的。给 width: 50% 和 height: 50% 并不能使它变成正方形。它只是计算与其父元素相关的元素的宽度和高度。您应该提供固定值而不是百分比值。并使用 display: block 将内联 anchor 元素转换为 block 元素。

a.square1
{
    width: 100px;      /* fixed value */
    height: 100px;     /* fixed value */
    border: 1px solid red;
    padding: 9%;
    display: block;    /* converted to block element */
    margin-top: 0%;
    background-color: #FAFAFA;
    opacity: 0.5;
}

Working fiddle

由于以百分比表示的填充值，布局似乎是响应式方形元素，因为以百分比表示的填充顶部或底部值对应于宽度而不是高度。

注意:您还可以使用vh/vw 单位(适用于现代浏览器)。 using 的回退是，无论是调整宽度还是调整高度，它都会起作用，但不适用于两个尺寸的调整。

例如:

width: 20vh; height: 20vh; //works for height resizing

和

widdth: 20vw; height: 20vw; //works for width resizing