Menempatkan perbatasan dalam div dan tidak di tepi

Set box-sizing properti 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>

Ia bekerja pada IE8 & di atas.

Anda juga dapat menggunakan box-shadow seperti ini:

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;
}

Contoh berikut ini: http://jsfiddle.net/nVyXS/ (hover untuk melihat perbatasan)

Ini bekerja di browser modern saja. Misalnya: No IE 8 dukungan. Lihat caniuse.com (box-shadow fitur) untuk info lebih lanjut.

Mungkin itu adalah terlambat menjawab, tapi saya ingin berbagi dengan temuan saya. Saya menemukan 2 pendekatan baru untuk masalah ini saya belum menemukan berikut ini jawaban:

Batin perbatasan melalui box-shadow css properti

Ya, box-shadow digunakan untuk menambahkan kotak-bayangan untuk unsur-unsur. Tapi anda dapat menentukan inset bayangan, yang akan terlihat seperti dalam perbatasan bukan seperti bayangan. Anda hanya perlu mengatur horizontal dan vertikal bayangan 0px, dan "menyebar" milik box-shadow dengan lebar border yang anda ingin memiliki. Jadi untuk 'dalam' perbatasan 10px anda akan menulis sebagai berikut:

div{
    width:100px;
    height:100px;
    background-color:yellow;
    box-shadow:0px 0px 0px 10px black inset;
    margin-bottom:20px;
}

Berikut ini adalah [jsFiddle][1] contoh yang menggambarkan perbedaan antara box-shadow perbatasan dan 'normal' perbatasan. Dengan cara ini anda perbatasan dan kotak lebar dari total 100px termasuk perbatasan.

Lebih lanjut tentang box-shadow:di sini

Perbatasan melalui outline css properti

Berikut ini adalah pendekatan lain, tapi cara ini perbatasan akan menjadi luar kotak. Berikut ini adalah [contoh][3]. Sebagai berikut dari contoh, anda dapat menggunakan css outline properti, untuk mengatur perbatasan yang tidak mempengaruhi lebar dan tinggi dari elemen. Dengan cara ini, lebar perbatasan tidak ditambahkan dengan lebar dari suatu elemen.

div{
   width:100px;
   height:100px;
   background-color:yellow;
   outline:10px solid black;
}

Lebih lanjut tentang outline: di sini

Yahoo! Ini benar-benar mungkin. Aku menemukannya.

Untuk Batas Bawah:

div {box-shadow: 0px -3px 0px red inset; }

Untuk Perbatasan Atas:

div {box-shadow: 0px 3px 0px red inset; }

Gunakan pseudo element:

.button {
    background: #333;
    color: #fff;
    float: left;
    padding: 20px;
    margin: 20px;
    position: relative;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
}

<div class='button'>Hello</div>

Menggunakan ::setelah anda styling virtual last child dari elemen yang dipilih. konten properti menciptakan anonim diganti elemen.

Kami adalah yang mengandung elemen semu menggunakan mutlak posisi relatif terhadap orang tua. Maka anda memiliki kebebasan untuk memiliki apapun latar belakang kustom dan/atau perbatasan di latar belakang dan elemen utama.

Pendekatan ini tidak mempengaruhi penempatan isi elemen utama, yang berbeda dari menggunakan box-sizing: border-box;.

Pertimbangkan contoh ini:

.parent {
    width: 200px;
}

.button {
    background: #333;
    color: #fff;
    padding: 20px;
    border: 5px solid #f00;
    border-left-width: 20px;
    box-sizing: border-box;
}

<div class='parent'>
    <div class='button'>Hello</div>
</div>

Di sini .tombol lebar dibatasi menggunakan elemen induk. Pengaturan border-left-width menyesuaikan konten-ukuran box dan dengan demikian posisi teks.

.parent {
    width: 200px;
}

.button {
    background: #333;
    color: #fff;
    padding: 20px;
    position: relative;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
    border-left-width: 20px;
}

<div class='parent'>
    <div class='button'>Hello</div>
</div>

Menggunakan pseudo-elemen pendekatan yang tidak mempengaruhi isi kotak size.

Tergantung pada aplikasi, dengan menggunakan pendekatan pseudo-elemen yang mungkin atau mungkin tidak diinginkan mendatang.

Meskipun pertanyaan ini sudah cukup dijawab dengan solusi menggunakan box-shadow dan garis properties, saya ingin sedikit memperluas ini untuk semua orang yang telah mendarat di sini (seperti saya) mencari solusi untuk batin perbatasan dengan offset

Jadi let's mengatakan anda memiliki hitam 100px x 100px div dan anda perlu untuk inset dengan perbatasan putih - yang memiliki batin offset dari 5px (katakanlah) - ini masih bisa dilakukan dengan sifat di atas.

box-shadow

Kuncinya di sini adalah untuk mengetahui bahwa beberapa kotak-bayangan diperbolehkan, di mana yang pertama bayangan dan selanjutnya bayangan lebih rendah z-order.

Dengan pengetahuan itu, box-shadow deklarasi akan:

box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white;

div {
  width: 100px;
  height: 100px;
  background: black;
  box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white; 
}

<div></div>

Pada dasarnya, apa yang deklarasi katakan adalah: render terakhir (10px putih) bayangan pertama, kemudian render sebelumnya 5px bayangan hitam di atas itu.

outline dengan garis-offset

Untuk efek yang sama seperti di atas garis deklarasi akan sama:

outline: 5px solid white;
outline-offset: -10px;

div {
  width: 100px;
  height: 100px;
  background: black;
  outline: 5px solid white;
  outline-offset: -10px;
}

<div></div>

NB: garis-offset isn't didukung oleh IE jika yang's penting untuk anda.

Anda dapat menggunakan properti outline dan garis-offset dengan nilai negatif daripada menggunakan regular perbatasan, bekerja untuk saya:

Using a regular border.
<div id="border"></div>

Using outline and outline-offset.
<div id="outline"></div>



div{
    height: 100px;
    width: 100px;
    background-color: grey;
    margin-bottom: 10px; 
}

div#border{
    border: 2px solid red;
}

div#outline{
    outline: 2px solid red;
    outline-offset: -2px;
}

Saya tahu ini agak tua, tapi karena kata kunci "perbatasan dalam" mendarat saya langsung di sini, saya ingin berbagi beberapa temuan yang mungkin layak disebut di sini. Ketika saya menambahkan perbatasan di negara melayang-layang, aku punya efek yang OP berbicara tentang. Perbatasan iklan piksel dengan dimensi kotak yang membuatnya gelisah. Ada dua cara yang bisa menangani hal ini yang juga bekerja untuk IE7.

1. Memiliki perbatasan yang sudah melekat pada elemen dan hanya mengubah warna. Cara ini matematika yang sudah disertakan.

div {
   width:100px;
   height:100px;
   background-color: #aaa;
   border: 2px solid #aaa; /* notice the solid */
}

div:hover {
   border: 2px dashed #666;
}

2 ) Memberikan kompensasi perbatasan dengan marjin negatif. Ini masih akan menambah ekstra piksel, tetapi posisi dari elemen tidak akan gelisah di

div {
   width:100px;
   height:100px;
   background-color: #aaa;
}

div:hover {
  margin: -2px;
  border: 2px dashed #333;
}

untuk konsisten sesuaian antara yang baru dan yang lebih tua browser, tambahkan double container, luar dengan lebar, batin dengan perbatasan.

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

ini jelas hanya jika anda tepat lebar lebih penting daripada memiliki markup tambahan!

Jika anda menggunakan box-sizing: border-box yang berarti tidak hanya perbatasan, padding,margin, dll. Semua elemen akan datang di dalam induk elemen.

div p {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 150px;
    height:100%;
    border: 20px solid #f00;
    background-color: #00f;
    color:#fff;
    padding: 10px;

}

<div>
  <p>It was popularised in the 1960s with the release of Letraset sheets</p>
</div>

Terbaik cross browser solusi (sebagian besar untuk dukungan IE) seperti @Steve mengatakan adalah untuk membuat sebuah div 98px lebar dan tinggi dari menambahkan border 1px sekitar, atau anda dapat membuat gambar latar belakang untuk div 100x100 px dan menggambar perbatasan di atasnya.

Anda dapat melihat garis dengan offset tapi ini membutuhkan beberapa padding ada pada div. Atau anda bisa benar-benar posisi perbatasan div dalam, sesuatu seperti

<div id='parentDiv' style='position:relative'>
  <div id='parentDivsContent'></div>
  <div id='fakeBordersDiv' 
       style='position: absolute;width: 100%;
              height: 100%;
              z-index: 2;
              border: 2px solid;
              border-radius: 2px;'/>
</div>

Anda mungkin perlu untuk bermain-main dengan margin palsu perbatasan div sesuai yang anda inginkan.