2015-11-01 1 views
0

Я недавно изучил некоторые html/css и сделал небольшой проект, чтобы начать работу самостоятельно. Я столкнулся с проблемой. Я добавил сплошную черную границу 1px к div, и он сдвинул мой текст прямо на фоне моего div. Как это исправить?Добавление границы в мой HTML-div сдвигает мой текст

+3

Просьба поделиться кодом, который у вас уже есть, это поможет нам вам помочь! –

ответ

1

Попробуйте добавить свойство к DIV:

box-sizing: border-box; 

Значение по умолчанию для box-sizing является content-box, что означает, что width и height только вещи учитываются в определенной высоте и ширине.

В противоположность этому, border-box делает это так, что width, height, padding и border все в пределах заданной ширины и высоты.

Например, в <div> с box-sizing: content-box; height: 400px; width: 400px, то содержание (то есть, текст) будет 400px на 400px. Добавление border или padding приведет к перетаскиванию содержимого (как и к вашему случаю) и сделает все поле более широким. С другой стороны, если вы измените его на box-sizing с одинаковой шириной и высотой, то 400px будет учитывать все эти свойства размера (кроме margin).

Смежные вопросы