span でパディングとマージンが使いにくい理由:
おそらく、タイトルの問題は誰もが認識しているわけではありません。パディングとマージンは使いやすいと思う人もいれば、使いにくいと思う人もいます。以下では、2 つの属性が Span で使いやすいかどうかを例を使って紹介します。
一.padding 属性:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>CSS教程</title><style type="text/css">span{ border:1px solid red;}.first{ padding:20px;}.second{ padding-left:20px; padding-right:20px;}</style></head><body> <span class="first">蚂蚁部落</span> <span class="second">蚂蚁部落</span></body></html>上記のコードから、最初のスパンによって設定されたパディングが完全に正しくレンダリングされていないことがわかりますが、おそらく一部のブラウザーでは下の境界線が表示されません。枠線も表示できません。 2 番目のスパンの左右のパディング設定は通常どおりです。デフォルトでは、span の左右のパディングは使いやすいですが、上下のパディングは問題を引き起こす可能性があると結論付けることができます。
2. マージン属性:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51texiao.cn/" /><title>CSS教程</title><style type="text/css">div{ width:200px; height:100px; border:1px solid blue;}span{ border:1px solid red;}.first{ margin:20px;}.second{ margin-left:20px; margin-right:20px;}</style></head><body> <div><span class="first">蚂蚁部落</span></div> <div><span class="second">蚂蚁部落</span></div></body></html>実際、マージンとパディングは同じであり、左右のマージンは有効ですが、上下のマージンに問題がある可能性があります。この問題の解決策は非常に簡単で、span をブロックレベルの要素にするだけです。
元のアドレス: http://www.51texiao.cn/div_cssjiaocheng/2015/0519/1889.html
元のアドレス: http://www.softwhy.com/forum.php?mod=viewthread&tid = 4697
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
