最大幅は100ピクセル、幅は100ピクセル、最大幅は幅よりも短いのはなぜですか？

Question

私はそれらの2の違いを理解したいが

最大幅ありがとう：100pxに

幅：必要に応じて100pxに

body{ 
     max-width: 1080px; 
     width: 1080px; 
     background-color: floralwhite; 
     margin:0px; 
     padding: 0px; 
    } 

p{ 
     width:100px; /* and max-width of 100px; */ 
     padding: 20px; 
     margin:0px; 
     float:left; 
    } 

Answer 1

widthプロパティはmax-widthプロパティよりも厳密であると考えることができます。

• 幅は言う：「あなたは、この幅と何も他のでなければなりません。」
• 最大幅には「あなたが望む幅にして、この幅より大きくない」と言われています。

あなたが提供したデモでこれを見ることができます。 天然のの幅は約50pxで、100pxより大きくないので、max-widthは本当に気にしません。ただし、widthはボックスが100pxでないことを確認し、100pxに設定します。

Answer 2

max-width属性は、全体widthを使用していますコンテンツによってはpaddingとなります。 width属性は、指定された金額（あなたの場合は100px）を常に使用します。

See my example here.

あなたはMDNにそれについての詳細を読むことができます：

max-widthから最大幅のCSSプロパティは要素の最大幅を設定するために使用されます。 widthプロパティの使用値がmax-widthで指定された値より大きくならないようにします。

widthからwidthプロパティは、要素の幅を指定します。デフォルトでは、プロパティはコンテンツ領域の幅を定義します。ボックスサイズがborder-boxに設定されている場合は、代わりに境界領域の幅が決まります。

Answer 3

max-widthプロパティは、要素の最大幅を設定するために使用されます。

これにより、widthプロパティの値がmax-widthより大きくならないようにします。

注：max-widthプロパティの値は、widthを上書きします。

したがって、両方のスタイルが指定されている場合、widthプロパティがmax-widthより小さい場合はwidthプロパティが適用されます。そうでない場合は、max-widthプロパティが適用されます。

max-widthを指定するとwidthプロパティはデフォルトで 'auto'に設定されますが、依然としてmax-widthに制限されます。