スパンの幅と高さが設定できないのはなぜですか

<span。>タグはインライン要素に属しているため、高さと幅を設定できません。幅と高さを変更する必要がある場合は、ブロック要素またはインラインブロック要素に変換する必要があります
。span {display:inline-block;}
デモンストレーションの例:2つのスタイルを以下に示します。class1はスパンの幅と高さを設定し、class2はスパンをインラインブロック要素に変更してから、クラス1スタイルをスパンの1つに追加し、もう1つはclass1とclass2スタイル、効果を観察する

Html要素を作成する

<span class="class1">示例文字</span>
<span class="class1 class2">示例文字</span>

cssスタイルを設定する

.class1{width:200px;height:30px;line-height:30px;padding:10px;margin:20px;border:1px solid green;}
.class2{display:inline-block;}

観察効果:
最初のスパンはデフォルトでインライン要素であるため、幅と高さの設定は機能しません。2番目のスパンはインラインブロックモードに変更されているため、幅と高さを設定できます。
ここに写真の説明を挿入

おすすめ

転載: blog.csdn.net/dd_Mr/article/details/84333529