Mam <div>
element i chcę nałożyć na niego ramkę. Wiem, że umiem pisać style="border: 1px solid black"
, ale to dodaje 2 piksele po obu stronach div, co nie jest tym, czego chcę.
Wolałbym, aby ta krawędź znajdowała się -1px od krawędzi div. Sama div ma wymiary 100px x 100px, a jeśli dodam ramkę, muszę wykonać matematykę, aby ją wyświetlić.
Czy jest jakiś sposób, aby wyświetlić ramkę i upewnić się, że pole będzie nadal mieć 100 pikseli (w tym ramkę)?
Odpowiedzi:
Ustaw
box-sizing
właściwość naborder-box
:Działa na IE8 i nowszych .
źródło
outline
.box-sizing
caniuse.com/#search=box-sizingMożesz także użyć cienia pola w następujący sposób:
Przykład tutaj: http://jsfiddle.net/nVyXS/ (najedź, aby wyświetlić ramkę)
Działa to tylko w nowoczesnych przeglądarkach. Na przykład: brak obsługi IE 8. Aby uzyskać więcej informacji, zobacz caniuse.com (funkcja box-shadow) .
źródło
Prawdopodobnie jest to spóźniona odpowiedź, ale chcę się podzielić z moimi ustaleniami. Znalazłem 2 nowe podejścia do tego problemu, których nie znalazłem tutaj w odpowiedziach:
Wewnętrzna granica za pośrednictwem
box-shadow
właściwości cssTak, cień-pole służy do dodawania cieni do elementów. Możesz jednak określić
inset
cień, który wyglądałby jak wewnętrzna ramka, a nie cień. Musisz tylko ustawić cienie poziome i pionowe0px
, a właściwość „spread
”box-shadow
na szerokość ramki, którą chcesz mieć. Tak więc dla „wewnętrznej” granicy 10 pikseli napisałbyś:Oto przykład jsFiddle, który ilustruje różnicę między
box-shadow
ramką a „normalną” ramką. W ten sposób twoja ramka i szerokość pudełka wynoszą łącznie 100 pikseli wraz z ramką.Więcej informacji o box-shadow: tutaj
Obramuj właściwość css konspektu
Oto inne podejście, ale w ten sposób granica byłaby poza ramką. Oto przykład . Jak wynika z tego przykładu, możesz użyć
outline
właściwości css , aby ustawić granicę, która nie wpływa na szerokość i wysokość elementu. W ten sposób szerokość ramki nie jest dodawana do szerokości elementu.Więcej o konspekcie: tutaj
źródło
Wieśniak! To jest naprawdę możliwe. Znalazłem to.
Dla dolnej granicy:
Dla górnej granicy:
źródło
Użyj pseudoelementu :
Za pomocą
::after
projektujesz wirtualne ostatnie dziecko wybranego elementu.content
właściwość tworzy anonimowy zastąpiony element .Zawieramy pseudoelement przy użyciu pozycji bezwzględnej względem rodzica. Masz wtedy swobodę posiadania dowolnego niestandardowego tła i / lub obramowania w tle głównego elementu.
To podejście nie wpływa na umieszczenie zawartości głównego elementu, co różni się od używania
box-sizing: border-box;
.Rozważ ten przykład:
Tutaj
.button
szerokość jest ograniczona za pomocą elementu nadrzędnego. Ustawienieborder-left-width
dopasowań dostosowuje rozmiar pola zawartości, a tym samym pozycję tekstu.Zastosowanie podejścia pseudoelementowego nie wpływa na rozmiar pola zawartości.
W zależności od aplikacji podejście przy użyciu pseudoelementu może, ale nie musi być pożądanym zachowaniem.
źródło
:Before
.Chociaż na to pytanie została już odpowiednio udzielona odpowiedź za pomocą rozwiązań wykorzystujących
box-shadow
ioutline
, chciałbym nieco rozwinąć tę kwestię dla wszystkich tych, którzy wylądowali tutaj (jak ja) szukając rozwiązania dla wewnętrznej granicy z przesunięciemPowiedzmy, że masz czarną 100px x 100px
div
i musisz wstawić ją białą ramką - która ma wewnętrzne przesunięcie 5px (powiedzmy) - nadal można to zrobić z powyższymi właściwościami.cień-pudełko
Sztuczka polega na tym, aby wiedzieć, że dozwolonych jest wiele cieni w ramkach, gdzie pierwszy cień jest na górze, a kolejne cienie mają niższą kolejność.
Przy tej wiedzy deklaracja w tle będzie następująca:
Pokaż fragment kodu
Zasadniczo, deklaracja ta mówi: renderuj pierwszy (10 pikseli biały) cień, a następnie renderuj poprzedni czarny cień 5 pikseli powyżej.
kontur z przesunięciem konturu
Dla takiego samego efektu jak powyżej deklaracje konspektu byłyby następujące:
Pokaż fragment kodu
Uwaga:
outline-offset
nie jest obsługiwany przez IE, jeśli jest to dla Ciebie ważne.Demo Codepen
źródło
Możesz użyć właściwości
outline
ioutline-offset
z wartością ujemną zamiast zwykłegoborder
, działa dla mnie:źródło
Wiem, że jest to nieco starsze, ale ponieważ słowa kluczowe „granica w środku” znalazły mnie tutaj bezpośrednio, chciałbym podzielić się niektórymi spostrzeżeniami, o których warto tu wspomnieć. Kiedy dodawałem granicę w stanie unoszenia, dostałem efekty, o których mówi OP. Obramowanie reklamuje piksele do wymiarów pudełka, co spowodowało, że jest on zwichnięty. Istnieją dwa inne sposoby radzenia sobie z tym, które działają również w IE7.
1) Miej już przymocowaną ramkę do elementu i po prostu zmień kolor. W ten sposób matematyka jest już uwzględniona.
2) Zrekompensuj swoją granicę ujemnym marginesem. Nadal doda to dodatkowe piksele, ale pozycjonowanie elementu nie będzie przeskakujące
źródło
w celu spójnego renderowania między nowymi i starszymi przeglądarkami dodaj podwójny pojemnik, zewnętrzny o szerokości, wewnętrzny z ramką.
jest to oczywiście tylko wtedy, gdy dokładna szerokość jest ważniejsza niż dodatkowe znaczniki!
źródło
źródło
Najlepszym rozwiązaniem dla różnych przeglądarek (głównie do obsługi IE), jak powiedział @Steve, jest zrobienie div 98px szerokości i wysokości niż dodanie obramowania 1px wokół niego, lub możesz zrobić obraz tła dla div 100x100 px i narysować na nim ramkę.
źródło
Możesz spojrzeć na kontur z przesunięciem, ale wymaga to dopełnienia, aby istniało na div. Możesz też absolutnie umieścić wewnątrz div div, coś w stylu
Być może będziesz musiał manipulować marginesami na fałszywym div div, aby dopasować go tak, jak chcesz.
źródło
Bardziej nowoczesnym rozwiązaniem może być użycie css
variables
icalc
.calc
jest szeroko obsługiwany, alevariables
nie jest jeszcze dostępny w IE11 (dostępne polypełniacze).Chociaż wykorzystuje to pewne obliczenia, których pierwotne pytania starano się uniknąć. Myślę, że to dobry czas na użycie obliczeń, ponieważ są one kontrolowane przez sam css. Nie ma też potrzeby dodawania znaczników ani przywłaszczania innych właściwości css, które mogą być później potrzebne.
To rozwiązanie jest naprawdę przydatne tylko wtedy, gdy nie jest wymagana stała wysokość .
źródło
Jednym z rozwiązań, których nie widziałem powyżej, jest przypadek, w którym wypełniasz dane wejściowe, co robię w 99% przypadków. Możesz zrobić coś w stylu ...
Podoba mi się to, że mam pełne menu właściwości border + padding + przejścia dla każdej strony.
źródło