CSSのmin-widthとmax-widthに同じ値を指定する利点

投稿者: Anonymous

初歩的なことでしたら大変恐縮なのですが、
min-widthmax-widthが同じ値の実装をたまに見かけるものの、
この書き方は何か利点があるのでしょうか。

例えば

min-width: 35px;
max-width: 35px;

とある場合、シンプルに

width: 35px;

とした方が変更も簡単だと思います。
(今回はtableのtdでこのような書き方を見つけました)

例えばwidthだけだと制約が弱く変更されてしまう場合があるとすれば、
どのような場合に変更されてしまうのかの例を教えて頂けるとありがたいです。
よろしくお願いします。

解決

どこかからmin-widthmax-widthを継承するのを警戒しての事ではないでしょうか。
(こういった配慮が必要になるかは、CSS の設計によると思います)

下記スニペットの例ですと、CSS側では.xxへの指定としてwidth: 5em;を指定しています。
しかし、HTML側で.xxが付いているのはp要素ですから、pへのスタイル指定のmin-width: 10em;も有効です。
この場合min-widthに制約され、width10emより小くならないという事になります。
.yyの方はmin-widthの指定があるので、pへの指定を上書き出来ています。

_x000D_

_x000D_

p {_x000D_
	min-width: 10em;_x000D_
	color: white;_x000D_
	background: green;_x000D_
}_x000D_
.xx {_x000D_
	width: 5em;_x000D_
	background: darkblue;_x000D_
}_x000D_
.yy {_x000D_
	min-width: 5em;_x000D_
	max-width: 5em;_x000D_
	background: darkred;_x000D_
}

_x000D_

<p>あいうえお。かきくけこ。</p>_x000D_
<p class="xx">あいうえお。かきくけこ。</p>_x000D_
<p class="yy">あいうえお。かきくけこ。</p>

_x000D_

_x000D_

_x000D_

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *