Kiedy do div dodaje się obramowanie 1 px, zwiększa się rozmiar Div. Nie chcę tego robić

Po kliknięciu dodaję obramowanie 1px do div, więc rozmiar Div wzrasta o 2px X 2px. Nie chcę zwiększać rozmiaru div. Czy można to zrobić w prosty sposób?

Brudne szczegółowe wyjaśnienie
Właściwie dodam DIV z float: left (ten sam rozmiar, jak ikony) do elementu div-kontenera, więc wszystkie układają się jeden po drugim, a kiedy (szerokość elementu div kontenera wynosi 300px), nie ma spacji w szerokości, więc podrzędne DIV pojawia się w następnym wierszu, więc jest podobny do katalogu, ale ze względu na obramowanie zwiększa się tylko wybrany rozmiar DIV, DIV pod wybranym DIV przechodzi w prawo i tworzy puste miejsce poniżej wybranego DIV.

EDYCJA:
Zmniejszanie wysokości / szerokości po zaznaczeniu, ale jak je zwiększyć. Używam frameworka innej firmy, więc nie ma zdarzenia, gdy DIV przegra wybór.

Właściwość border css zwiększy rozmiar „zewnętrzny” wszystkich elementów, z wyjątkiem tds w tabelach. Można uzyskać wizualne pomysł, jak to działa w Firebug ( przerwane ), w zakładce> Układ formacie HTML.

Na przykład element div o szerokości i wysokości 10 pikseli oraz obramowaniu 1 piksela będzie miał zewnętrzną szerokość i wysokość 12 pikseli.

W twoim przypadku, aby wyglądało na to, że obramowanie znajduje się „wewnątrz” elementu div, w wybranej klasie CSS możesz zmniejszyć szerokość i wysokość elementu przez podwojenie rozmiaru obramowania lub możesz zrobić to samo dla wyściółka elementów.

Na przykład:

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

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

Jest to również pomocne w tym scenariuszu. pozwala na ustawienie granic bez zmiany szerokości 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+ */
}

Zaczerpnięte z http://css-tricks.com/box-sizing/

ustaw na nim obramowanie przed kliknięciem, aby miał ten sam kolor co tło.

Następnie po kliknięciu zmień tylko kolor tła, a szerokość się nie zmieni.

Innym dobrym rozwiązaniem jest użycie outlinezamiast border. Dodaje obramowanie bez wpływu na model pudełka. Działa to w IE8 +, Chrome, Firefox, Opera, Safari.

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

Spróbuj zmienić borderna outline:

outline: 1px solid black;

Korzystając z wielu z tych rozwiązań, uważam, że trik polegający na ustawianiu border-color: transparentjest najbardziej elastyczny i szeroko obsługiwany:

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

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

Dlaczego jest lepiej:

• Nie ma potrzeby, aby na stałe zakodować szerokość elementu
• Świetna obsługa wielu przeglądarek (brakowało tylko IE6)
• W przeciwieństwie do programu outline, nadal możesz osobno określić np. Górną i dolną granicę
• W przeciwieństwie do ustawiania koloru obramowania na kolor tła, nie musisz go aktualizować, jeśli zmienisz tło, i jest on kompatybilny z tłami w kolorze innym niż jednolite.

Spróbuj tego

box-sizing: border-box;

Zwykle używam dopełnienia, aby rozwiązać ten problem. Wypełnienie zostanie dodane, gdy obramowanie zniknie, i usunięte, gdy pojawi się obramowanie. Przykładowy kod:

.good-border {
  padding: 1px;
}

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

Wyświetl mój pełny przykładowy kod na JSFiddle: https://jsfiddle.net/3t7vyebt/4/

Po prostu zmniejsz szerokość i wysokość o dwukrotność border-width

Możesz zrobić kilka wymyślnych rzeczy z wstawionymi cieniami. Przykład umieszczenia obramowania na dole elementu bez zmiany jego rozmiaru:

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

Czasami nie chcesz, aby zmiana dotyczyła wysokości lub szerokości bez jawnego ustawienia. W takim przypadku uważam, że pomocne jest użycie pseudoelementów.

.border-me {
    position: relative;
}

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

Możesz także zrobić dużo więcej z pseudoelementem, więc jest to całkiem mocny wzorzec.

Zwiększając obramowanie, spróbuj zmniejszyć rozmiar marginesu

Musiałem mieć możliwość „obramowania” dowolnego elementu, dodając klasę i nie wpływając na jej wymiary. Dobrym rozwiązaniem dla mnie było użycie box-shadow. Ale w niektórych przypadkach efekt nie był widoczny ze względu na inne rodzeństwo. Więc połączyłem zarówno typowe box-shadow, jak i inset box-shadow. Rezultatem jest wygląd obramowania bez zmiany jakichkolwiek wymiarów.

Wartości oddzielone przecinkami. Oto prosty przykład:

.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

Dostosuj się do preferowanego wyglądu i gotowe!

Możemy również użyć funkcji css calc ()

width: calc(100% - 2px);

odejmowanie 2 pikseli dla obramowań

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

Możesz utworzyć element z obramowaniem w tym samym kolorze, co tło, a gdy chcesz, aby obramowanie było widoczne, po prostu zmień jego kolor.

W przypadku, gdy zawartość divjest renderowana dynamicznie i chcesz ustawić jej wysokość, możesz użyć prostego triku z outline:

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

button:hover {
    outline-color: transparent;
}

Przykład tutaj: https://codepen.io/Happysk/pen/zeQzaZ

Możesz wypróbować wstawkę typu box-shadow

coś takiego: box-shadow: inset 0px -5px 0px 0px #fff

dodaje białą ramkę o rozmiarze 5 pikseli na dole elementu bez zwiększania rozmiaru