ブロック要素で空の場合にwidthが効かない場合の対処

概要

div要素のようなブロック要素で、その中身に何も記述されていない場合は幅を決めるためのwidthを指定しても反映されないということがありました。

そこで、その解決方法を紹介します。

原因

空のブロック要素では、widthを記述しただけでは、無視される仕様のようです。

そのため、幅を決めるwidthと高さを決めるheightを一緒に記述することで空のブロック要素でもwidthが反映されます。

解決方法

今回の場合は、幅が300pxであると仮定します。

.クラス名 {
  width: 300px;
  min-height: 1px;
}

重要な部分は、min-heightです。これは、これ以上小さくしてはならないという高さを指定するためのものです。そのため1pxを指定すると、高さが1px以上となります。

heightを使ってもいいのですが、heightを使う場合、高さが固定となってしまうので、使いにくい場合もあるということで、ここではmin-heightを使いました。

まとめ

分かってしまえば簡単です。

HTMLやCSSにはこのようなはまりやすいポイントがたくさんあるので、一つずつ覚えていきたいと思います。