Czy można rozpocząć obramowanie-bottom po x ilości pikseli?

Question

Byłoby super, gdyby nie było takiej opcji, inaczej będę musiał pokrywać border-bottom z innego div ..

Answer 1

EDIT: Co zrobiłbym te dni, jeśli nie trochę więcej pod względem zawartości tekstowej elementu jest używać box-shadow i background-clip. W przeciwnym razie zobacz ostatnie rozwiązanie w mojej oryginalnej odpowiedzi.

div { 
 
    border-bottom: solid .75em transparent; 
 
    margin: 7em auto 1em; 
 
    width: 10em; height: 5em; 
 
    box-shadow: 0 1px 0 -1px black; 
 
    background: dimgrey padding-box; 
 
}

<div></div>

Niech wnikliwie wyżej.

Po pierwsze, border-bottom: solid .75em transparent.

Obszar border-bottom będzie obszarem luki. Właśnie dlatego sprawiamy, że jest przejrzysty. Zmiana szerokości tej granicy zmienia szerokość odstępu.

Reguły - tutaj nie ma nic dziwnego, tylko pozycjonowanie i wymiarowanie elementu.

Następnie mamy ten kawałek: box-shadow: 0 1px 0 -1px black.

Ta box-shadow bez rozmazania tworzy dolną krawędź. Przesunięcie y (druga wartość) tworzy "granicę" 1px. Zwiększenie tego przesunięcia y zwiększa szerokość naszej "granicy". To jest granica black, ale możemy to zmienić na cokolwiek innego.

Nie chcemy również, aby nasz bokserski cień pojawiał się po bokach, więc podajemy go w rozkładzie -1px.

Na koniec ustawiamy background na naszym elemencie. Jest to jeden, ale może to być cokolwiek innego (gradient, obraz, cokolwiek). Domyślnie tła również rozciągają się pod granicą, ale nie chcemy tego, więc ograniczamy je do obszaru padding-box. Użyłem stenogramu tutaj. Właściwość longhand to background-clip, a znajdziesz tam szczegółowe wyjaśnienie, jak to działa i inne przykłady podobne do tego w this article (disclaimer: napisałem to).

---

Oto oryginalna odpowiedź

Można użyć element pseudo. Absolutnie ustawione, 100% szerokości, przesunięcie poniżej dolnej części elementu.

demo

HTML:

<div></div> 

CSS:

div { 
    position: relative; 
    margin: 7em auto 1em; 
    width: 10em; height: 5em; 
    background: dimgrey; 
} 
div:after { 
    position: absolute; 
    bottom: -.8em; 
    width: 100%; 
    border-bottom: solid 1px; 
    content: ''; 
} 

---

Albo można użyć background-clip: content-box i nie trzeba będzie użyć pseudo- ele ment. Ale wtedy twój tekst przylgnie do krawędzi tła (chyba, że ​​jest to mały tekst i wyśrodkowany).

demo

Stosowna CSS:

div { 
    margin: 7em auto 1em; 
    padding: 0 0 .8em; 
    border-bottom: solid 1px; 
    width: 10em; height: 5em; 
    background: dimgrey content-box; 
} 

Answer 2

Można użyć padding.

padding: 10px; // push 10px the content 
border: 1px solid #fff; 

Answer 3

Marginesy zewnętrzne i wewnętrzne są białe przestrzeń wokół obrazu lub obiektu.

Jak widać na obrazku, dopełnienie to spacja między treścią a ramką, którą definiujesz, zamiast marginesu to przestrzeń poza obramowaniem, między ramką a pozostałymi elementami obok tego obiektu.

Więc w twoim przypadku można zrobić coś takiego:

HTML:

<div id="box"></div> 

CSS:

#box{ 
    background: url(image.jpg) no-repeat; 
    height: 100px; 
    width: 100px; 
    border-bottom: 1px solid #333; 
    padding-bottom: 10px; 
} 

Tutaj można znaleźć prosty przykład: http://jsfiddle.net/k7QcN/