niewytłumaczalne przestrzeń nad przyciskiem wewnątrz DIV

przedmowie: Czytałem wiele artykułów na temat obrazów wewnątrz div o dziwną przestrzeń wokół nich, itdniewytłumaczalne przestrzeń nad przyciskiem wewnątrz DIV

Przykład # 1: Unwanted padding-bottom of a div
Przykład # 2: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
Przykład # 3: cannot eliminate space between 2 horizontal divs inside containing div

Ich problemy wydają się podobne, ale nie identyczne z moimi. W tym przykładowym dokumencie granica, dopełnienie, kontur itp. Są ustawione na zero. Jednak zarówno Opera, jak i Firefox renderują dodatkowy piksel na górze elementu div. Trzeci może oszukać tę przestrzeń, ale nikt nie odpowiada, dlaczego tak jest.

Edycja: czytam WIELE artykułów, które kusząco blisko odpowiadają na to pytanie, ale wszystkie wydają się nieco odmienne od faktycznego problemu.

Czego mi brakuje? To moje pierwsze pytanie, więc proszę o cierpliwość :)

<!doctype html> 
<html> 
    <head> 
    <title>Anger</title> 
    <style> 
     *{ 
     cursor: default; 
     margin: 0; 
     outline: 0; 
     border: none; 
     padding: 0; 
     text-decoration: none; 
     } 
     body{ 
     background-color: #87cefa; 
     } 
     div{ 
     background-color: #ffffff; 
     } 
     button{ 
     border-radius: 9px; 
     padding: 1px 6px 2px 6px; 
     font: 14px monospace; 
     color: #ffffff; 
     background-color: #1e90ff; 
     } 
    </style> 
    <head> 
    <body> 
    <div> 
     <button>Sample Button</button> 
    </div> 
    </body> 
<html>

Czy jest jakiś kod CSS3, który sprawi, że wszystko będzie działać? To jest eksperymentalny projekt, więc najnowszy CSS3 jest mile widziany.

PS: ja tylko dbać o świadczenie Opera, Firefox, choć byłoby miło, aby wspierać tych samych standardów kodu zgodnego .. Dzięki!

Źródło

2012-07-15 Fumbles

Zmień wysokość linii elementu div na zero.

div{ 
     background-color: #ffffff; 
     line-height:0; 
    }

jsFiddle example

Źródło

2012-07-15 18:39:57 j08691

Dzięki! To działa, czy ktoś wie, gdzie w specyfikacji (czytam je) to zachowanie jest określone? – Fumbles

Wysokość linii jest związana z rozmiarem czcionki, która oczywiście może być różna dla różnych systemów operacyjnych. Możesz przeczytać więcej na https://developer.mozilla.org/en/CSS/line-height i zobaczyć, że domyślna wysokość linii to około 1,2. Ponieważ nie określiłeś żadnych reguł czcionek w CSS, domyślna wysokość linii została uruchomiona i zresetowana do zerowej liczby naprawionych rzeczy. – j08691

@Fumbles - sekcje specyfikacji CSS 2.1 [10.6] (http://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins) i [10.8] (http://www.w3.org/TR/CSS2 /visudet.html#line-height). Ale to nie jest łatwa lektura. – Alohci

Ustaw vertical-align do góry przycisk. To naprawi to.

Źródło

2012-07-15 18:42:44 banzomaikaka

aha, która działa również, czy jest jakaś "poprawka", którą mogę dodać do resetowania mojego stylu dla wszystkich elementów, które również to wyleczy? Jeśli nie, to wybieram między działającymi odpowiedziami i po prostu go używam, gdy zauważam ten problem :) – Fumbles

Twierdzę, że jest to lepsze, ponieważ nie zepsujesz wysokości linii div (dodaj kolejny element wbudowany do div i będzie wyglądać dziwnie, dlaczego? Jego wysokość wynosi 0. Możesz to zmienić, ale to naprawdę niepotrzebna praca. Na moim resetowanym arkuszu stylów wierzę, że mam coś takiego jak button, input, textarea {vertical-align: top; /*między innymi*/}. Rozwiążę jednak moją odpowiedź, aby wyjaśnić, dlaczego najlepsze działa w pionie i dlaczego tego potrzebujesz. Daj mi 10 minut. – banzomaikaka

Świetnie, żałuję, że takie dziwne zachowanie nie zostało wyeliminowane ze specyfikacji, ponieważ wydaje się, że nie działa dobrze – Fumbles

niewytłumaczalne przestrzeń nad przyciskiem wewnątrz DIV

Odpowiedz

Powiązane problemy