※ ChatGPTを利用し、要約された質問です(原文:spanタグ 無視される)
spanタグのpaddingとwidthが無視される問題と文字の重なりについて
このQ&Aのポイント
spanタグのpaddingやwidthが無視される理由として、CSSのbox-sizingプロパティがデフォルトのままだと、要素の幅にpaddingやborderが含まれないからです。
paddingやwidthを適用させるには、CSSのbox-sizingプロパティをborder-boxに設定することで解決することができます。
また、文字が重なる問題は、span要素にdisplayプロパティをinline-blockに設定することで解決することができます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sample</title>
<style type="text/css">
span.test{
padding:
6px 0px;
background-color:
gainsboro;
text-align:center;
border:
1px
gray
solid;
margin-top:10px;
margin-bottom:8px;
color:
gray;
width:
100px;
}
</style>
</head>
<body>
<span class="test">
<a href="#A">
A</a>
</span>
<br>
<span class="test">
<a href="#B">
B</a>
</span>
</body>
</html>
-------------------------
というソースで
spanタグで
padding:
margin-top:10px;
margin-bottom:8px;
width:
が無視されてしまうのですが
なぜでしょう?
更に画像のように文字が重なってしまいます。
padding:
margin-top:10px;
margin-bottom:8px;
width:
これらを適用させるにはどうすればいいでしょうか?
AとBは隣同士に表示したいため、divではなく、spanを使用しました。
お礼
ご回答ありがとうございました。