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

128

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.

Nachiket
źródło

Odpowiedzi:

49

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 */
}
Sean Amos
źródło
thnx, miałem wybraną klasę .dragdrop, ale była ona używana przez wszystkie obiekty do przeciągania i miałem około 3 różnych rozmiarów (3 różne typy) obiektu Przeciągalnego, więc zachowałem takie samo wypełnienie we wszystkich 3 ORAZ ustawiłem dopełnienie w zaznaczeniu .dragdrop. . & zadziałało. :)
Nachiket
To nie jest dobre rozwiązanie dla responsywnych projektów. Użycie outlinelub obramowanie w tym samym kolorze co tło (i zmiana jego koloru na inny po wybraniu) jest bardziej elastyczne.
AliBZ
1
Ale przypuśćmy, że musisz unikać sztywnego kodowania szerokości, aby pozwolić elementowi płynąć lub odpowiadać na szerokość portu widoku: zobacz moją odpowiedź za pomocąborder-color: transparent
Edward Newell
Nie ma potrzeby wykonywania tych obliczeń, po prostu ustaw rozmiar pola na border-box. Zobacz odpowiedź ejfrancis poniżej i zobacz ten artykuł .
jbyrd
Czy jesteś pewien co do td w tabelach? W Chrome nadal wydaje się, że zwiększa się rozmiar.
Protector one
105

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/

ejfrancis
źródło
4
box-size: pole border-box powinno być ustawione na wszystkim jako nowoczesna najlepsza praktyka. Zobacz paulirish.com/2012/box-sizing-border-box-ftw
jbyrd
6
W niektórych przypadkach wydaje się to nie działać; nie wiem, dlaczego. Zobacz: codepen.io/anon/pen/QZaBQG
Wilson Biggs
51

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.

corymathews
źródło
3
Pomysłowy! żałuję, że sam o tym nie pomyślałem.
Rijul Gupta
9
Tak, ale jeśli nie masz jednolitego, kolorowego tła? Zobacz moją odpowiedź używającborder-color: transparent
Edward Newell
44

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 )

chowey
źródło
Jest super, ale w porównaniu z obramowaniem nie ma „konturu po lewej,…”, nie w moim przypadku.
Imskull
2
Wtedy zaleca się używanie box-shadowna innej mojej odpowiedzi na podobne pytanie. Nie ma takiej samej obsługi przeglądarki, ale obecnie jest to mniejszy problem.
chowey
Dziękuję #chowey, właśnie zdałem sobie sprawę, że box-shadowmoże również obsługiwać jednostronne obramowanie , idealne rozwiązanie.
Imskull
border-color: transparentma lepszą obsługę różnych przeglądarek --- zobacz moją odpowiedź ...
Edward Newell
1
Ten komentarz jest niedoceniany. To świetny sposób na obramowanie elementu bez zmiany jego rozmiaru!
Sebastian Nemeth
42

Spróbuj zmienić borderna outline:

outline: 1px solid black;
panwp
źródło
8
Działa, chyba że masz border-radius.
Jean-Marie Dalmasso
28

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.
Edward Newell
źródło
1
Okazało się, że działa to najlepiej z elementami o dynamicznych rozmiarach w moim UX. Całkowicie zatrzymano zmianę rozmiaru w Myszce Nadmiernej! Dzięki, panie Newell!
d3r3kk
Bródkowy. Dzięki Ci!
Harald Hoerwick
To jest ten!
podczas gdy prawdziwe
transparentto jest potrzeba!
dimpiax
Tego potrzebuję (Y)
HaxxanRaxa
20

Spróbuj tego

box-sizing: border-box;
Hoang Trung
źródło
4
To powinna być odpowiedź, brudna prosta.
Spets
Dlaczego to nie działa wszędzie? Np. Codepen.io/anon/pen/QZaBQG
Tom
cześć @Tom, nie jestem pewien, dlaczego to jeszcze nie działa. Ale w twoim przypadku rozważ usunięcie wysokości w pojemniku i zamiast tego użyj wypełnienia. Może rozwiązać twój problem.
Hoang Trung
17

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

wprowadź opis obrazu tutaj

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

Chociaż
źródło
1
Czy możesz mi powiedzieć, co się właściwie dzieje, jestem zdezorientowany, dlaczego przy złej granicy unoszenie się tutaj przesuwa się w dół, kiedy na nią najeżdżasz?
Suraj Jain
@SurajJain Ponieważ rozmiar div "zła ramka" zostanie zmieniony (dodaj 1 piksel obramowania), gdy najedziesz na niego kursorem.
Czw
6

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

Sadat
źródło
3

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;
}
Luke Taylor
źródło
3

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.

Jack Guy
źródło
1
Miałem obramowanie 1px, które chciałem zmienić na 2px, a jedynym sposobem, w jaki mogłem to zrobić, było usunięcie widthi heightoraz dodanie właściwości a bottomi leftoprócz topi left, z których wszystkie powinny być ustawione na przeciwną szerokość oryginalne obramowanie (w moim przypadku -1px). Świetny hack
Chase Sandmann
2

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

bieg
źródło
2

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!

Chris
źródło
2

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

width: calc(100% - 2px);

odejmowanie 2 pikseli dla obramowań

Rajeev Singh
źródło
1
.filter_list_button_remove {
    border: 1px solid transparent; 
    background-color: transparent;
}
.filter_list_button_remove:hover {
    border: 1px solid; 
}
peevo
źródło
1
Myślę, że byłoby to bardziej pomocne dla PO i dalszych gości, jeśli dodasz jakieś wyjaśnienie swoich zamiarów.
Reporter,
1

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.

Matt Karatilovly
źródło
1
Tak, ale przypuśćmy, że twoje tło nie jest jednolitym kolorem ... zobacz moją odpowiedź na podstawie używaniaborder-color: transparent
Edward Newell
Lub wszystko razem, jakul li a{border-bottom:2px solid transparent;} ul li a:hover{border-bottom:2px solid red;}
stackunderflow
0

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

Matúš Šťastný
źródło
Kontur nie ma niestety zaokrąglonych rogów :(
M3RS
0

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

Mzard31
źródło