Ketika batas 1 px ditambahkan ke div, ukuran Div meningkat, Tidak ingin melakukan itu

Pada klik Saya menambahkan, 1px berbatasan dengan div, jadi ukuran Div bertambah 2px X 2px. Saya tidak ingin ukuran div bertambah. Apakah ada cara sederhana untuk melakukannya?

Penjelasan Terperinci Berantakan
Sebenarnya saya menambahkan DIV dengan float: left (ukuran yang sama, seperti ikon) ke container-div, jadi semua menumpuk satu demi satu, dan ketika (lebar container-div adalah 300px) tidak ada spasi yang tersisa Anak DIV datang di baris berikutnya, jadi seperti katalog, tetapi karena perbatasan hanya ukuran DIV yang dipilih yang bertambah, DIV di bawah DIV yang dipilih pergi ke kanan dan menciptakan ruang kosong di bawah DIV yang dipilih.

EDIT:
Mengurangi Tinggi / Lebar pada seleksi, tetapi bagaimana meningkatkannya kembali. Menggunakan beberapa kerangka pihak ke-3, jadi tidak ada acara ketika DIV kehilangan pilihan ..

Properti border css akan meningkatkan semua elemen ukuran "luar", kecuali tds dalam tabel. Anda bisa mendapatkan gambaran visual tentang cara kerjanya di Firebug ( dihentikan ), di bawah tab tata letak html->.

Seperti contoh, div dengan lebar dan tinggi 10px dan border 1px, akan memiliki lebar dan tinggi 12px.

Untuk kasus Anda, untuk membuatnya tampak seperti bingkai berada di "dalam" div, di kelas CSS yang Anda pilih, Anda dapat mengurangi lebar dan tinggi elemen dengan menggandakan ukuran bingkai Anda, atau Anda dapat melakukan hal yang sama untuk elemen bantalan.

Misalnya:

div.navitem
{
    width: 15px;
    height: 15px;
    /* padding: 5px; */
}

div.navitem .selected
{
    border: 1px solid;
    width: 13px;
    height: 13px;
    /* padding: 4px */
}

Ini juga membantu dalam skenario ini. ini memungkinkan Anda untuk mengatur batas tanpa mengubah lebar div

textarea { 
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

Diambil dari http://css-tricks.com/box-sizing/

atur batas di atasnya sebelum Anda mengklik agar warnanya sama dengan latar belakang.

Kemudian ketika Anda mengklik ubah saja warna latar belakang dan lebarnya tidak akan berubah.

Solusi lain yang baik adalah dengan menggunakan outlinebukan border. Ini menambahkan batas tanpa mempengaruhi model kotak. Ini berfungsi di IE8 +, Chrome, Firefox, Opera, Safari.

( https://stackoverflow.com/a/8319190/2105930 )

Coba ubah borderke outline:

outline: 1px solid black;

Setelah menggunakan banyak dari solusi ini, menurut saya menggunakan trik pengaturan border-color: transparentmenjadi yang paling fleksibel dan didukung secara luas:

.some-element {
    border: solid 1px transparent;
}

.some-element-selected {
    border: solid 1px black;
}

Mengapa lebih baik:

• Tidak perlu melakukan hard-code untuk lebar elemen
• Dukungan lintas-browser yang hebat (hanya IE6 yang terlewat)
• Berbeda dengan outline, Anda masih dapat menentukan, misalnya, batas atas dan bawah secara terpisah
• Tidak seperti mengatur warna perbatasan menjadi latar belakang, Anda tidak perlu memperbarui ini jika Anda mengubah latar belakang, dan itu kompatibel dengan latar belakang berwarna non-solid.

Coba ini

box-sizing: border-box;

Saya biasanya menggunakan padding untuk mengatasi masalah ini. Padding akan ditambahkan saat pembatas menghilang dan dihapus saat pembatas muncul. Kode sampel:

.good-border {
  padding: 1px;
}

.good-border:hover {
  padding: 0px;
  border: 1px solid blue;
}

Lihat kode sampel lengkap saya di JSFiddle: https://jsfiddle.net/3t7vyebt/4/

Kurangi saja lebar dan tinggi dua kali lipat dari lebar bingkai

Anda dapat melakukan beberapa hal mewah dengan bayangan inset. Contoh untuk meletakkan perbatasan di bagian bawah elemen tanpa mengubah ukurannya:

.bottom-border {
  box-shadow:inset 0px -3px 0px #000;
}

Terkadang Anda tidak ingin tinggi atau lebar terpengaruh tanpa menyetelnya secara eksplisit. Dalam hal ini, saya merasa terbantu dengan menggunakan elemen pseudo.

.border-me {
    position: relative;
}

.border-me::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: solid 1px black;
}

Anda juga dapat melakukan lebih banyak hal dengan elemen pseudo sehingga ini adalah pola yang cukup kuat.

Coba kurangi ukuran margin saat Anda menambah batas

Saya harus dapat "membatasi" elemen apa pun dengan menambahkan kelas dan tidak memengaruhi dimensinya. Solusi yang baik bagi saya adalah menggunakan box-shadow. Tetapi dalam beberapa kasus, efeknya tidak terlihat karena saudara kandung lainnya. Jadi saya menggabungkan kedua bayangan kotak khas serta bayangan kotak sisipan. Hasilnya adalah tampilan tepi tanpa mengubah dimensi apa pun.

Nilai dipisahkan dengan koma. Berikut contoh sederhananya:

.add_border {
    box-shadow:-1px 0 1px 1px rgba(0, 0, 0, 0.75), inset -1px 0 0 1px rgba(0, 0, 0, 0.75);
}

jsfiddle.dll

Sesuaikan dengan tampilan pilihan Anda dan Anda siap berangkat!

Kita juga bisa menggunakan fungsi css calc ()

width: calc(100% - 2px);

mengurangi 2px untuk perbatasan

.filter_list_button_remove {
    border: 1px solid transparent; 
    background-color: transparent;
}
.filter_list_button_remove:hover {
    border: 1px solid; 
}

Anda bisa membuat elemen dengan border dengan warna yang sama dengan background Anda, lalu saat ingin menampilkan border, ubah saja warnanya.

Jika konten Anda divdirender secara dinamis dan Anda ingin menyetel tingginya, Anda dapat menggunakan trik sederhana dengan outline:

button {
    padding: 10px;
    border: 4px solid blue;
    border-radius: 4px;
    outline: 2px solid white;
    outline-offset: -4px;
}

button:hover {
    outline-color: transparent;
}

Contoh di sini: https://codepen.io/Happysk/pen/zeQzaZ

Anda dapat mencoba inset box-shadow

sesuatu seperti ini: box-shadow: inset 0px -5px 0px 0px #fff

menambahkan batas 5px putih ke bagian bawah elemen tanpa menambah ukuran