【CSS】width、margin、paddingを一緒に使う時の注意点

CSSのwidthプロパティは、要素の幅を指定するために使われます。

使い方は、とても簡単で、幅の値を指定してやればよいだけです。

まずはwidthの使い方について、簡単に説明しておきましょう。

widthの使い方

.sample
{
    width: 800px;
}

上の例だと、sampleセレクタを指定した要素は幅800pxになります。

具体的な数値で幅を指定することもできますし、「auto」とすることもできます。

.sample
{
    width: auto;
}

「auto」とした場合は、親要素いっぱいに幅を指定することができます。

そんな使い方として、widthはとても簡単ではありますが、CSSに慣れてくると一つのセレクタに対してwidthだけしか指定しないことの方が少なく、他にもmarginだったり、paddingだったり、borderだったり、さまざまなプロパティも一緒に使うことの方が圧倒的に多いでしょう。

そこで、今回はさまざまなプロパティを一緒に使う時のwidthの注意点について解説していきます。

例えば要素の横幅を1000pxにしたいとします。

単純にwidthプロパティだけしか使わないなら、下のように指定するだけです。

.sample
{
    width: 1000px;
}

しかし、sampleセレクタを指定したい要素に、marginやpaddingなど、余白を指定したいこともあるでしょう。

sampleセレクタにmarginやpaddingを追加してみましょう。

.sample
{
    width: 1000px;
    margin: 0 20px;
    padding: 0 10px;
}

このようにwidthプロパティの他にmarginプロパティ、さらにpaddingプロパティを指定した場合、このセレクタの要素は1000pxになるでしょうか。

答えは1000pxにはなりません。

先ほどのsampleセレクタの要素の幅は1060pxになってしまいます。

つまり、widthで指定した値の他に、余白部分で指定した値も含めて全体の横幅を考えなければならないのです。

marginとpaddingの値を変えずに、要素の幅を1000pxにするためには、widthを940pxにする必要があるのです。

marginは要素の外側の余白を指定するものですので、全体の幅にmarginで指定した値を含めなければならないのは何となく理解できますが、要素の内側の余白を指定するpaddingの値も含めなければならないのは、意外だと思いませんか？

さらに、1pxのborderを指定していた場合は、さらにwidthの値を左右あわせて2px差し引かなければならないのです。

widthプロパティの使い方は簡単ではありますが、他のプロパティと一緒に使う場合、結構、クセのあるプロパティです。

widthプロパティを指定したセレクタと、marginプロパティやpaddingプロパティを指定したセレクタ、複数のセレクタを指定しているような要素は注意して使っていきたいものです。

どうもレイアウト調整がうまくいかない場合は、widthと他のプロパティに指定した値を注意深く見直してみると解決できるかもしれません。

marginプロパティとpaddingプロパティについては、下の記事も参考にしてみてください。