Имам елемент <div>
и искам да му сложа рамка. Знам, че мога да напиша style="border: 1px solid black"
, но това добавя по 2px от двете страни на div, което не е това, което искам.
Предпочитам тази рамка да бъде -1px от ръба на div. Самият div е с размери 100px x 100px и ако добавя рамка, трябва да направя някои математически действия, за да се появи рамката.
Има ли някакъв начин, по който мога да накарам границата да се появи и да гарантирам, че полето все още ще бъде 100px (включително границата)?
Задайте свойството box-sizing
на border-box
:
div {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 100px;
height: 100px;
border: 20px solid #f00;
background: #00f;
margin: 10px;
}
div + div {
border: 10px solid red;
}
<div>Hello!</div>
<div>Hello!</div>
Работи на IE8 & по-горе.
Можете също така да използвате box-shadow по следния начин:
div{
-webkit-box-shadow:inset 0px 0px 0px 10px #f00;
-moz-box-shadow:inset 0px 0px 0px 10px #f00;
box-shadow:inset 0px 0px 0px 10px #f00;
}
Пример тук:
(натиснете курсора, за да видите рамката)Това работи само в съвременните браузъри. Например: Не се поддържа IE 8. Вижте caniuse.com (функция box-shadow) за повече информация.
за последователно визуализиране между новите и по-старите браузъри добавете двоен контейнер, външният с ширината, а вътрешният с рамката.
<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>
това очевидно е само ако точната ви ширина е по-важна от наличието на допълнителен маркер!