display: inline-blockを使用して完全な正方形を作成する方法があるのだろうかと思います。その理由は、テキストのすぐ隣に配置したいということです。インラインブロックで完璧な四角形を作成する
.legend {
display: inline-block;
color: rgba(0, 0, 0, 0);
width: 1em;
background-color: lightblue;
}<div>
<div class="legend">
d
</div>
<div style="display: inline-block">
Some legend
</div>
</div>今のところはまだちょっと長方形に見えます。
非常に簡単です。あなたはあまりにも、div要素の高さを指定することができます.legend
.legend {
display: inline-block;
color: rgba(0, 0, 0, 0);
width: 1em;
height: 1em;// just add this line
background-color: lightblue;
}
私はむしろ、デフォルトの線高さを使用するか、少なくともそれに一致します –
大丈夫ですので、線の高さを修正して、それに応じて幅を調整することができます –
に高さを追加します。次のことを考えてみましょう：
`高さを追加する方法について/* The container needs to be relatively positioned */
.container {
position: relative;
}
/* The legend is absolutely positioned, but in relation to its
* container.
* We also apply a common trick to place it at the vertical center of
* its parent: position the top bound at 50% of the parent's height.
* then transform the position to move it up by 50% of its own height.
*/
.legend {
display: inline-block;
color: rgba(0, 0, 0, 0);
width: 1em;
height: 1em;
background-color: lightblue;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
/* This div is decisive for the whole thing's height.
* Since the legend is positioned in an absolute way, we need to make
* room for it by moving this div to the right (margin-left)
*/
.legend-text {
margin-left: 1em;
padding: 5px;
display: inline-block;
}<div class="container">
<div class="legend">
d
</div>
<div class="legend-text">
Some legend
</div>
</div>可能であれば、デフォルトの線高さを使います。 –
@A .Lauなぜですか？正方形を線の中で垂直にセンタリングしますか？幅を '1em'に設定すると、完全な正方形の高さは間違いなく' 1em'になります。 – Barthy
あなたは床から少し浮いていることに気付くでしょう。高さの有無にかかわらずそれを見て、あなたは小さな違いに気づくでしょう。 –
方法：1EM;'、あまりにも？ – Barthy