cssの記法について

質問

サイトのCSSを見ていると、
padding: 0 15px;
という表記を目にします。
padding:0px 15px;ならわかるのですが、このように記述するのはなぜなのでしょうか。

もう一つ、
.hoge:after {
display: block;
clear: both;
content: "";
}
こういうのをよく見ます。
divでcontainer代わりに使っている要素の後にこれを挿入しているイメージなのですが、
これはなぜ挿入されているのでしょうか。

回答No.2

Katsu_Kaiz

<style>
.sample {
padding: 0 15px;
padding: 0px 15px;
}
</style>

書き方としてはどちらも正しいのですが、値が0のときは単位を省略できます。0pxよりも0のほうがシンプルで見やすく、またpxとキーボードを打つ手間も省け、さらにCSSのファイルサイズも小さくなります。単純に計算して、一文字あたり1バイトだからです。

ただし後から変更する可能性がある場合、たとえば0pxになったり10pxになったり20pxになったりする場合は、0pxと書いておいたほうが変更しやすいです。そういう意味では、CSSの文脈や記述する人の好みによって記述が分かれやすい部分でもあります。

もうひとつのご質問は、いわゆるfloatの解除です。たとえば、下のようなCSSとHTMLがあったとします。

<style>
.container:after {
content: '';
clear: both;
display: block;
}

.container li {
float: left;
}
</style>

<ol class="container">
<li>あ</li>
<li>い</li>
<li>う</li>
</ol>

<li>にfloatがかかっているため、<li>タグが横並びになりますね。この横並びを解除して元に戻すのがclearで、floatしている要素の親に指定します。つまり、<li>の親である<ol>に対してclearすると、その時点で横並びが解除されるというわけです。clearのほとんどがcontainer要素の後に挿入されているというのは、こういう理由からです。子要素のfloatを、親containerの後に挿入されたclearで解除しているのです。

このclearを書き忘れると表示が崩れやすいので、注意が必要です。《clearfix》というキーワードで検索すると、より詳しく説明しているサイトが見つかるかと思います。基本的には、《content: ''; clear: both; display: block;》の三点セットに、:afterを組みあわせて使うのがコツです。

参考URL：

http://htmq.com/style/clear.shtml

回答No.1

muuming2001

clear
http://stinkear.blog39.fc2.com/blog-entry-3.html

float解除の1つの方法だと思います。

０の場合のみ単位は省略できる（らしいです）
https://w3g.jp/css/guide/units

わたしも0pxと書く派です