Как сделать чтобы border не равнялся по padding?
Верстаю чтобы набраться опыта, и возникла проблема. Хотел сделать красивую одностороннюю рамку, отделяющую ссылки(текст), и все получилось, но у меня нужно текст(ссылки) опустить ниже, а если я добавляю padding-top то у меня вырастает этот border по padding’у. Как можно зафиксировать размер border’а или-же понизить позицию текста не через padding?
- Вопрос задан более трёх лет назад
- 976 просмотров
7 комментариев
Оценить 7 комментариев
код, мало что понятно
Сергей delphinpro @delphinpro Куратор тега CSS
Свойство box-sizing
Свойство box-sizing может принимать одно из двух значений – border-box или content-box . В зависимости от выбранного значения браузер по-разному трактует значение свойств width/height .
Значения box-sizing
content-box Это значение по умолчанию. В этом случае свойства width/height обозначают то, что находится внутри padding . border-box Значения width/height задают высоту/ширину всего элемента.
Для большей наглядности посмотрим на картинку этого div в зависимости от box-sizing :
/*+ no-beautify */ div
В верхнем случае браузер нарисовал весь элемент размером в width x height , в нижнем – интерпретировал width/height как размеры внутренней области.
Исторически сложилось так, что по умолчанию принят content-box , а border-box некоторые браузеры используют если не указан DOCTYPE , в режиме совместимости.
Но есть как минимум один случай, когда явное указание border-box может быть полезно: растягивание элемента до ширины родителя.
Пример: подстроить ширину к родителю
Задача: подогнать элемент по ширине внешнего элемента, чтобы он заполнял всё его пространство. Без привязки к конкретному размеру элемента в пикселях.
Например, мы хотим, чтобы элементы формы ниже были одинакового размера:
Как сделать, чтобы элементы растянулись чётко по ширине FORM ? Попробуйте добиться этого самостоятельно, перед тем как читать дальше.
Попытка width:100%
Первое, что приходит в голову – поставить всем элементам INPUT ширину width: 100% .
form < width: 200px; border: 2px solid green; >form input, form select Как видно, не получается. Элементы вылезают за пределы родителя.
Причина – ширина элемента 100% по умолчанию относится к внутренней области, не включающей padding и border . То есть, внутренняя область растягивается до 100% родителя, и к ней снаружи прибавляются padding/border , которые и вылезают.
Есть два решения этой проблемы.
Решение: дополнительный элемент
Можно убрать padding/border у элементов INPUT/SELECT и завернуть каждый из них в дополнительный DIV , который будет обеспечивать дизайн:
form < width: 200px; border: 2px solid green; >/* убрать padding/border */ form input, form select < padding: 0; border: 0; width: 100%; >/* внешний div даст дизайн */ form div