CSS — Меняем ширину

CSSВсем привет! В этой небольшой статье мы с вами научимся менять ширину блоков через CSS. В дизайне без настройки ширины не обойтись. Думаю новичкам будет полезен данный пост.

Меняем ширину через CSS

Для того, чтобы поменять ширину блока используется свойство width (ширина). Оно указывается в пикселях или процентах. Допустим у нас есть блок, который принадлежит к классу .someclass

Для того, чтобы поменять ширину блока в css…

Этот блок имеет свойство width: 50%

Соответственно 50% означает, что блок растягивается исключительно на 50% от родительского в котором он находится, если быть точнее, то на 50% ширины блока в котором находится данная статья.

Давайте поменяем ширину блока в пикселях. Например, установим параметр 300px:

Для того, чтобы поменять ширину блока в css…

Как видите, в пикселях гораздо сложнее рассчитать расстояние, которое должен занимать ваш блок.

Свойство width имеет еще разновидности max-width и min-width. Max-width устанавливает максимальную ширину настраиваемого блока, min-width — минимальную. Соответственно при выставленных параметрах, свойство width будет обретать либо максимальную, либо минимальную величину в зависимости от количества контента внутри блока и размеров экрана, но никогда не выйдет за рамки максимальных и минимальных настроек.

P.S. В этом году я постараюсь лить меньше воды, и давать побольше полезной информации. На этом все! Подписывайтесь на группу ВК и ютубчик!

Поделиться в соц. сетях:

Понравилась статья? Поблагодари автора, накорми печеньками! :)

Опиши свой кейс здесь, если у тебя остались вопросы и мы обязательно ответим...