margin/border/paddingの指定方法メモ
CSSのmargin/border/paddingは、四辺を一括で指定する方法から四辺を個別に指定する方法まであって、どの形式でどの辺が影響を受けるのかがしょっちゅう分からなくなるので、自分用のメモ。
一応、以下のブラウザで確認。
- Internet Explorer 10
- Safari(Windows版) 5.1
- Google Chrome 31
- Firefox 25
- Opera 18
本当はブログ記事上で表現できればよかったのだが、はてな記法をエスケープしたりするのが面倒だったので、画面キャプチャを貼り付け(ぉ
ちなみに、使用したソースは以下のとおり。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>margin/border/padding</title> </head> <body> <style type="text/css"> .my_root { background-color: #888; margin: 0; border-width: 0; padding: 10px; } .my_frame { border-width: 2px; border-color: yellow; border-style: solid; display: inline-block; } .my_sample { border-style: solid; background-color: #fff; } .my_sample1_1 { margin: 10px; border-width: 20px; border-color: #f00; padding: 40px; } .my_sample2_1 { margin: 10px; border-width: 10px; border-color: #f00; padding: 10px; } .my_sample2_2 { margin: 10px 20px; border-width: 10px 20px; border-color: #f00 #0f0; padding: 10px 20px; } .my_sample2_3 { margin: 10px 20px 30px; border-width: 10px 20px 30px; border-color: #f00 #0f0 #00f; padding: 10px 20px 30px; } .my_sample2_4 { margin: 10px 20px 30px 40px; border-width: 10px 20px 30px 40px; border-color: #f00 #0f0 #00f #ff0; padding: 10px 20px 30px 40px; } </style> <div class="my_root"> <div class="my_frame"> <pre class="my_sample my_sample1_1"> <外から順に margin border padding > margin: 10px; border-width: 20px; border-color: #f00; padding: 40px; </pre> </div> <div style="clear: both;"></div> <div class="my_frame"> <pre class="my_sample my_sample2_1"> <四辺すべて> margin: 10px; border-width: 10px; border-color: #f00; padding: 10px; </pre> </div> <div class="my_frame"> <pre class="my_sample my_sample2_2"> <上下><左右> margin: 10px 20px; border-width: 10px 20px; border-color: #f00 #0f0; padding: 10px 20px; </pre> </div> <div style="clear: both;"></div> <div class="my_frame"> <pre class="my_sample my_sample2_3"> <上><左右><下> margin: 10px 20px 30px; border-width: 10px 20px 30px; border-color: #f00 #0f0 #00f; padding: 10px 20px 30px; </pre> </div> <div class="my_frame"> <pre class="my_sample my_sample2_4"> <上><右><下><左> margin: 10px 20px 30px 40px; border-width: 10px 20px 30px 40px; border-color: #f00 #0f0 #00f #ff0; padding: 10px 20px 30px 40px; </pre> </div> </div> </body> </html>