Свойство ширины CSS определяет ширину области содержимого элемента. Эта область представляет собой пространство между границей, отступом и полем элемента. Более того, свойство ширины CSS со значением « фит-контент ” отрегулирует ширину элемента в соответствии с содержимым.
В этом исследовании объясняется свойство ширины CSS со значением fit-content.
Как использовать свойство CSS width со значением fit-content?
Чтобы использовать свойство ширины CSS со значением fit-content, проверьте данный синтаксис:
ширина: подходит для содержания
Пример
В HTML добавьте три элемента div с одинаковым именем класса. коробка ” и три разных класса ” цвет-1 », « цвет-2 ', и ' цвет-3 ', соответственно. Добавьте элемент
внутри каждого div, чтобы добавить контент на веб-страницу:
< див учебный класс знак равно 'коробка цвет-1' >
< п > CSS соответствует ширине контента п >
див >
< див учебный класс знак равно 'коробка цвет-2' >
< п > Привет, мир ! п >
див >
< див учебный класс знак равно 'коробка цвет-3' >
< п > Работа в команде начинается с укрепления доверия. Мы команда, работающая за общая миссия. п >
див >
Вот вывод HTML-кода:
До сих пор мы обсуждали HTML-страницу. Теперь, в следующем разделе, мы будем применять различные стили CSS к элементам HTML, чтобы они выглядели лучше. В текущем примере мы проверим поведение « ширина 'свойство, имеющее значение ' фит-контент » в СС.
Стиль «коробка» div
.коробка {ширина: подгонка содержимого;
высота: 50 пикселей;
цвет: призрачный белый;
отступ: 6px;
поле: 2px;
размер шрифта: 18px;
}
“ .коробка ” относится к блоку класса div. Ниже приведены свойства, которые применяются к нему:
-
- “ ширина ” свойство со значением “ фит-контент ” использует доступное пространство, но не будет превышать содержимого.
- “ рост ” — это свойство, определяющее высоту элемента.
- “ цвет ” определяет цвет шрифта элемента.
- “ набивка » создает пространство внутри границы элемента или вокруг содержимого.
- “ прибыль ” определяет пространство вокруг элемента.
- “ размер шрифта ” определяет размер шрифта.
Стиль div «color-1»
.цвет- 1 {фоновый цвет: #00ABB3;
}
“ фоновый цвет » установлено значение « .цвет-1 ” разд.
Стиль div «color-2»
.цвет- 2 {фоновый цвет: #083AA9;
}
Стиль div «color-3»
фоновый цвет: № 4C6793;
}
Можно заметить, что ширина элемента устанавливается равной содержимому:
Замечательно! Мы успешно изучили использование CSS». ширина ” свойство со значением “ фит-контент ».
Заключение
Свойство ширины CSS позволяет нам использовать несколько значений. Эти значения указаны в процентах, пикселях или более. Чтобы установить его в соответствии с содержимым, « фит-контент ” можно установить значение. В этом посте описано свойство CSS width со значением fit-content с практической демонстрацией.