ホームページ >ウェブフロントエンド >htmlチュートリアル >span_html/css_WEB-ITnose でパディングとマージンが使いにくい理由
span_html/css_WEB-ITnose でパディングとマージンが使いにくい理由
- WBOYオリジナル
- 2016-06-24 11:40:24983ブラウズ
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
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。