Khi viền 1 px được thêm vào div, kích thước Div tăng, Đừng muốn làm điều đó

Khi nhấp vào tôi đang thêm, viền 1px thành div, vì vậy kích thước Div tăng thêm 2px X 2px. Tôi không muốn tăng kích thước div. Có cách nào đơn giản để làm như vậy?

Giải thích chi tiết lộn xộn
Trên thực tế, tôi đang thêm các DIV với float: left (cùng kích thước, giống như các biểu tượng) vào một container-div, vì vậy tất cả xếp chồng lên nhau và khi (chiều rộng của div là 300px) không có khoảng trống nào có chiều rộng các DIV con đến ở hàng tiếp theo, vì vậy nó giống như danh mục, nhưng do đường viền chỉ chọn kích thước DIV được tăng lên, DIV bên dưới DIV được chọn đi sang phải và tạo khoảng trống bên dưới DIV đã chọn.

EDIT:
Giảm chiều cao / chiều rộng khi chọn, nhưng làm thế nào để tăng trở lại. Sử dụng một số khung bên thứ 3, do đó, không có sự kiện khi DIV mất lựa chọn ..

Thuộc tính css viền sẽ tăng tất cả các yếu tố kích thước "bên ngoài", ngoại trừ tds trong bảng. Bạn có thể có được một ý tưởng trực quan về cách thức hoạt động của nó trong Fireorms (đã ngừng ), trong tab bố cục html->.

Chỉ là một ví dụ, một div có chiều rộng và chiều cao 10px và đường viền 1px, sẽ có chiều rộng và chiều cao bên ngoài là 12px.

Đối với trường hợp của bạn, để làm cho nó xuất hiện giống như đường viền nằm ở "bên trong" của div, trong lớp CSS đã chọn của bạn, bạn có thể giảm chiều rộng và chiều cao của phần tử bằng cách nhân đôi kích thước đường viền của mình hoặc bạn có thể làm tương tự cho các yếu tố đệm.

Ví dụ:

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

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

Điều này cũng hữu ích trong kịch bản này. nó cho phép bạn đặt đường viền mà không thay đổi độ rộng 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+ */
}

Lấy từ http://css-tricks.com/box-sizing/

đặt đường viền trên nó trước khi bạn nhấp vào cùng màu với nền.

Sau đó, khi bạn nhấp vào chỉ cần thay đổi màu nền và chiều rộng sẽ không thay đổi.

Một giải pháp tốt khác là sử dụng outlinethay vì border. Nó thêm một đường viền mà không ảnh hưởng đến mô hình hộp. Điều này hoạt động trên IE8 +, Chrome, Firefox, Opera, Safari.

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

Hãy thử đổi borderthành outline:

outline: 1px solid black;

Đã sử dụng nhiều giải pháp trong số này, tôi thấy việc sử dụng thủ thuật cài đặt border-color: transparentlà linh hoạt nhất và được hỗ trợ rộng rãi:

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

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

Tại sao nó tốt hơn:

• Không cần mã hóa độ rộng của phần tử
• Hỗ trợ nhiều trình duyệt tuyệt vời (chỉ IE6 bị bỏ lỡ)
• Không giống như outline, bạn vẫn có thể chỉ định riêng, ví dụ: viền trên và dưới riêng biệt
• Không giống như cài đặt màu đường viền thành màu nền, bạn không cần cập nhật màu này nếu bạn thay đổi nền và nó tương thích với nền màu không rắn.

Thử cái này

box-sizing: border-box;

Tôi thường sử dụng phần đệm để giải quyết vấn đề này. Phần đệm sẽ được thêm vào khi đường viền biến mất và loại bỏ khi đường viền xuất hiện. Mã mẫu:

.good-border {
  padding: 1px;
}

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

Xem mã mẫu đầy đủ của tôi trên JSFiddle: https://jsfiddle.net/3t7vyebt/4/

Chỉ cần giảm chiều rộng và chiều cao gấp đôi chiều rộng đường viền

Bạn có thể làm một số điều ưa thích với bóng trong. Ví dụ để đặt đường viền ở dưới cùng của một phần tử mà không thay đổi kích thước của nó:

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

Đôi khi bạn không muốn chiều cao hoặc chiều rộng bị ảnh hưởng mà không thiết lập rõ ràng. Trong trường hợp đó, tôi thấy hữu ích khi sử dụng các yếu tố giả.

.border-me {
    position: relative;
}

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

Bạn cũng có thể làm nhiều hơn với phần tử giả vì vậy đây là một mẫu khá mạnh mẽ.

Hãy thử giảm kích thước lề khi bạn tăng đường viền

Tôi cần có khả năng "viền" bất kỳ phần tử nào bằng cách thêm một lớp và không ảnh hưởng đến kích thước của nó. Một giải pháp tốt cho tôi là sử dụng bóng hộp. Nhưng trong một số trường hợp, hiệu quả không thể nhìn thấy do anh chị em khác. Vì vậy, tôi đã kết hợp cả bóng hộp điển hình cũng như bóng hộp bên trong. Kết quả là một cái nhìn biên giới mà không thay đổi bất kỳ kích thước.

Các giá trị được phân tách bằng dấu phẩy. Đây là một ví dụ đơn giản:

.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

Điều chỉnh cho giao diện ưa thích của bạn và bạn tốt để đi!

Chúng ta cũng có thể sử dụng hàm css calc ()

width: calc(100% - 2px);

trừ 2px cho viền

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

Bạn có thể tạo phần tử có viền với cùng màu của nền, sau đó khi bạn muốn viền hiển thị, chỉ cần thay đổi màu của nó.

Trong trường hợp nội dung của bạn divđược hiển thị linh hoạt và bạn muốn đặt chiều cao của nó, bạn có thể sử dụng một mẹo đơn giản với outline:

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

button:hover {
    outline-color: transparent;
}

Ví dụ ở đây: https://codepen.io/Happysk/pen/zeQzaZ

Bạn có thể thử một hình hộp bóng

đại loại như thế này: box-Shadow: inet 0px -5px 0px 0px #fff

thêm viền 5px trắng vào dưới cùng của phần tử mà không tăng kích thước