仅使用填充法制作方形伪元素

为什么不是伪元素在四边形的所有边上均具有相同的填充？仅使用填充法制作方形伪元素

当右/左填充是顶部/底部填充的1.5倍时，我只能实现方形伪元素。

查看下面的代码。

button{ 
 
    width: 200px; 
 
    height: 100px; 
 
    background: gray; 
 
    border:none; 
 
    font-size:16px; 
 
} 
 

 
.icon::before { 
 
    // position: relative; 
 
    padding: 20px; 
 
    content: ""; 
 
    background: black; 
 
} 
 

 
.icon2::before { 
 
    padding: 20px 30px; 
 
    content: ""; 
 
    background: black; 
 
}

<p>Pseudo element: padding on all sides is 20px.</p> 
 
<button class="icon"> 
 
    Click Me 
 
</button> 
 

 
<p>Pseudo element: padding on top/bottom is 20px, padding on left/right is 30px.</p> 
 
<button class="icon2"> 
 
    Click Me 
 
</button>

来源

2017-01-25 katzkode

因为它被视为默认内联元件和font-size将影响元件的尺寸。更改font-size: 0;或添加display: block;与匹配的高度/宽度，它将是一个正方形。

button{ 
 
    width: 200px; 
 
    height: 100px; 
 
    background: gray; 
 
    border:none; 
 
    font-size:16px; 
 
} 
 

 
.icon::before { 
 
    // position: relative; 
 
    padding: 20px; 
 
    content: ""; 
 
    background: black; 
 
    display: block; 
 
    width: 0; 
 
    height: 0; 
 
} 
 

 
.icon2::before { 
 
    padding: 20px; 
 
    content: ""; 
 
    background: black; 
 
    font-size: 0; 
 
}

<p>Pseudo element: padding on all sides is 20px.</p> 
 
<button class="icon"> 
 
    Click Me 
 
</button> 
 

 
<p>Pseudo element: padding on top/bottom is 20px, padding on left/right is 30px.</p> 
 
<button class="icon2"> 
 
    Click Me 
 
</button>

来源

2017-01-25 20:45:20

改变'字体size'到'0px'解决了我的问题。非常感谢你！ – katzkode

生成的内容继承字体大小和从父行高。

您可以重置字体大小以隐藏两个行或仅行高。

button{ 
 
    width: 200px; 
 
    height: 100px; 
 
    background: gray; 
 
    border:none; 
 
    font-size:16px; 
 
} 
 

 
.icon::before { 
 
    font-size:0;/* remove space used from inserted text and line-height*/ 
 
    padding: 10%;/* 10% of 200px width is 20px */ 
 
    vertical-align:middle;/* can be usefull;*/ 
 
    margin-right:0.25rem;/* keep away from next phrasing content */ 
 
    content: ""; 
 
    background: black; 
 
} 
 

 
.icon2::before { 
 
    padding: 20px 30px; 
 
    content: ""; 
 
    background: black; 
 
}

<p>Pseudo element: padding on all sides is 20px.</p> 
 
<button class="icon"> 
 
    Click Me 
 
</button> 
 

 
<p>Pseudo element: padding on top/bottom is 20px, padding on left/right is 30px.</p> 
 
<button class="icon2"> 
 
    Click Me 
 
</button>

来源

2017-01-25 20:48:49

见迈克尔的答案回答了为什么在你的问题。

我只是想指出的是，大部分的时间回答你的标题是使用的事实，比例填充是相对于事物的宽度。是的，宽度，而不是高度。即你可以添加padding-bottom: 100%来实现一个正方形。或者使62.5％达到16：9的比例，例如视频。

.square { 
 
    width: 100px; 
 
} 
 

 
.square::before { 
 
    display: block; 
 
    content: ''; 
 
    padding-bottom: 100%; 
 
    border: 1px solid red; 
 
}

<div class="square"></div>

来源

2017-01-25 20:54:08 Roope

仅使用填充法制作方形伪元素

回答

相关问题