Поставяне на рамка във вътрешността на div, а не в неговия край

Имам елемент <div> и искам да му сложа рамка. Знам, че мога да напиша style="border: 1px solid black", но това добавя по 2px от двете страни на div, което не е това, което искам.

Предпочитам тази рамка да бъде -1px от ръба на div. Самият div е с размери 100px x 100px и ако добавя рамка, трябва да направя някои математически действия, за да се появи рамката.

Има ли някакъв начин, по който мога да накарам границата да се появи и да гарантирам, че полето все още ще бъде 100px (включително границата)?

alex
Редактиран въпрос Направете януари 2015 в 4:38
Програмиране
css3 html css border
Направете март 2012 в 12:16
16 изгледи
Решение

Задайте свойството 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 & по-горе.

Gajus
Редактиран отговор Направете август 2015 в 7:28
Коментари (10)

Можете също така да използвате 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;
}

Пример тук: http://jsfiddle.net/nVyXS/ (натиснете курсора, за да видите рамката)

Това работи само в съвременните браузъри. Например: Не се поддържа IE 8. Вижте caniuse.com (функция box-shadow) за повече информация.

mkelley33
Редактиран отговор Направете август 2014 в 10:44
Коментари (14)

за последователно визуализиране между новите и по-старите браузъри добавете двоен контейнер, външният с ширината, а вътрешният с рамката.

<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>

това очевидно е само ако точната ви ширина е по-важна от наличието на допълнителен маркер!

Коментари (0)