CSS の width プロパティは、要素のコンテンツ領域の幅を定義します。この領域は、要素のボーダー、パディング、およびマージンの間のスペースです。さらに、CSS width プロパティの値は「 フィットコンテンツ 」は、コンテンツに応じて要素の幅を調整します。
この調査では、値 fit-content を持つ CSS width プロパティについて説明します。
fit-content 値で CSS 幅プロパティを使用する方法は?
fit-content 値で CSS width プロパティを使用する目的で、指定された構文を確認してください。
幅: 適合コンテンツ
例
HTML で、同じクラス名を持つ 3 つの div 要素を追加します。 箱 」と 3 つの異なるクラス「 色-1 」、「 色-2 '、 と ' 色-3 '、 それぞれ。各 div 内に
要素を追加して、Web ページにコンテンツを追加します。
< 分周 クラス = 「箱の色-1」 >
< p > CSS 幅フィット コンテンツ p >
分周 >
< 分周 クラス = 「箱の色-2」 >
< p > こんにちは世界 ! p >
分周 >
< 分周 クラス = 「箱の色-3」 >
< p > チームワークは信頼を築くことから始まります。私たちはチームワークです 為に 共通の使命。 p >
分周 >
HTML コードの出力は次のとおりです。
ここまで、HTML ページについて説明してきました。次のセクションでは、さまざまな CSS スタイルを HTML 要素に適用して、見栄えを良くします。進行中の例では、「 幅 「値を持つプロパティ」 フィットコンテンツ 」を CSS に追加します。
スタイル「ボックス」div
。箱 {幅: 適合コンテンツ;
高さ: 50px;
色: ゴーストホワイト;
パディング: 6px;
余白: 2px;
フォントサイズ: 18px;
}
「 。箱 」はdivクラスボックスを指します。以下は、それに適用されるプロパティです。
-
- 「 幅 ”値を持つプロパティ” フィットコンテンツ 」は利用可能なスペースを使用しますが、コンテンツを超えることはありません。
- 「 身長 」は要素の高さを決定するプロパティです。
- 「 色 」は、要素のフォントの色を定義します。
- 「 パディング ” プロパティは、要素の境界内またはコンテンツの周囲にスペースを作成します。
- 「 マージン 」は、要素の周囲のスペースを決定します。
- 「 フォントサイズ 」プロパティは、フォント サイズを決定します。
スタイル「color-1」div
。色- 1 {背景色: #00ABB3;
}
「 背景色 」プロパティが「 .color-1 」 div。
スタイル「color-2」div
。色- 2 {背景色: #083AA9;
}
スタイル「color-3」div
背景色: #4C6793;
}
要素の幅がコンテンツと同じに設定されていることがわかります。
それは素晴らしいことです！ CSS の使い方を学習することに成功しました。 幅 ”値を持つプロパティ” フィットコンテンツ 」。
結論
CSS の width プロパティを使用すると、いくつかの値を利用できます。これらの値は、パーセンテージ、ピクセル、またはそれ以上です。内容に応じて設定するには、「 フィットコンテンツ 」の値を設定できます。この投稿では、実用的なデモンストレーションを使用して、値 fit-content を持つ CSS width プロパティについて説明しました。