CSS W szerokości łącząca zawartość

Właściwość szerokości CSS określa szerokość obszaru zawartości elementu. Ten obszar jest przestrzenią między granicą elementu, wyściółką i marginesem. Ponadto właściwość szerokości CSS o wartości ”Fit-Content”Dostosuje szerokość elementu zgodnie z treścią.

To badanie wyjaśni właściwość szerokości CSS z wartością-kontaktową.

Jak korzystać z właściwości szerokości CSS o wartości dopasowania?

W celu użycia właściwości szerokości CSS o wartości dopasowania sprawdź podaną składnię:

Szerokość: kondycja dopasowania

Przykład

W HTML dodaj trzy elementy div o tej samej nazwie klasy „skrzynka”I trzy różne klasy„kolor-1”,„kolor-2", I "kolor-3”Odpowiednio. Dodać

Element wewnątrz każdego Div, aby dodać zawartość do strony internetowej:

CSS W szerokości łącząca zawartość

Witaj świecie!

Praca zespołowa zaczyna się od budowania zaufania. Jesteśmy zespołem pracującym dla wspólnej misji.

Oto wyjście kodu HTML:

Do tej pory omówiliśmy stronę HTML. Teraz, w następnej sekcji, zastosujemy różne style CSS do elementów HTML, aby wyglądały lepiej. W trwającym przykładzie sprawdzimy zachowanie „szerokość„Własność o wartości”Fit-Content„W CSS.

Styl „pudełko” div

.skrzynka
Szerokość: dopasowanie;
Wysokość: 50px;
Kolor: Ghost White;
Wyściółka: 6px;
Margines: 2px;
Rozmiar czcionki: 18px;

„„.skrzynka”Odnosi się do skrzynki klasy DIV. Poniżej znajdują się właściwości, które są do niego stosowane:

• • "szerokość„Własność o wartości”Fit-Content„Wykorzystuje dostępną przestrzeń, ale nie przekroczy treści.
  • "wysokość”Jest właściwością, która określa wysokość elementu.
  • "kolor„Definiuje kolor czcionki elementu.
  • "wyściółka„Nieruchomość produkuje przestrzeń wewnątrz granicy elementu lub wokół treści.
  • "margines”Określa przestrzeń wokół elementu.
  • "rozmiar czcionki„Właściwość określa rozmiar czcionki.

Styl „kolor-1” div

.Color-1
kolor tła: #00ABB3;

„„kolor tła„Własność jest ustawiona na„.kolor-1„Div.

Styl „kolor-2” div

.Color-2
kolor tła: #083AA9;

Styl „kolor-3” div

.kolor-3
kolor tła: #4C6793;

Można zauważyć, że szerokość elementu jest ustawiona równa treści:

To wspaniale! Z powodzeniem nauczyliśmy się użycia CSS ”szerokość„Własność o wartości”Fit-Content".

Wniosek

Właściwość szerokości CSS pozwala nam wykorzystać kilka wartości. Wartości te są w procentach, pikselach lub więcej. Aby ustawić go zgodnie z treścią, „Fit-Content„Wartość można ustawić. Ten post opisał właściwość szerokości CSS z wartością dopasowaną z praktyczną demonstracją.