2

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

例えば

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

とある場合、シンプルに

width: 35px;

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

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

0

1 件の回答 1

4

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

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

p {
	min-width: 10em;
	color: white;
	background: green;
}
.xx {
	width: 5em;
	background: darkblue;
}
.yy {
	min-width: 5em;
	max-width: 5em;
	background: darkred;
}
<p>あいうえお。かきくけこ。</p>
<p class="xx">あいうえお。かきくけこ。</p>
<p class="yy">あいうえお。かきくけこ。</p>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。