spazio inspiegabile sopra PULSANTE all'interno DIV

Premessa: Ho letto un sacco di articoli su immagini all'interno di un div avere uno spazio strano intorno a loro, eccspazio inspiegabile sopra PULSANTE all'interno DIV

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

I loro problemi sembrano simili ma non identici ai miei. In questo documento di esempio, il bordo, il padding, il contorno, ecc. Sono impostati a zero .. tuttavia sia Opera che Firefox rendono un pixel di riserva nella parte superiore del div. Il terzo potrebbe ingannare un modo per aggirare questo spazio ma nessuno sembra rispondere perché è lì ..

Modifica: Ho letto MOLTI articoli che sono allettanti per rispondere a questo, ma sembrano tutti leggermente diversi con il problema reale.

Cosa mi manca? È la mia prima domanda quindi sii paziente per favore :)

<!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>

C'è qualche CSS3 che farà funzionare tutto? Questo è un progetto sperimentale, quindi l'ultimo CSS3 è ben accetto.

PS: Mi interessa solo il rendering di Opera, anche se Firefox sarebbe bello supportare con lo stesso codice conforme agli standard .. Grazie!

fonte

2012-07-15 Fumbles

Modificare l'altezza della linea sul div su zero.

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

jsFiddle example

fonte

2012-07-15 18:39:57 j08691

Grazie! Funziona, qualcuno sa dove sono specificate le specifiche (le leggo)? – Fumbles

Bene l'altezza della linea è correlata alla dimensione del font che ovviamente può essere diversa nei vari sistemi operativi. Puoi leggere ulteriori informazioni su https://developer.mozilla.org/en/CSS/line-height e vedere che l'altezza della linea predefinita è circa 1.2. Dato che non hai specificato alcuna regola font nel tuo CSS, l'altezza della linea predefinita è stata avviata e reimpostata su zero elementi fissi. – j08691

@Fumbles - sezioni specifiche CSS 2.1 [10.6] (http://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins) e [10.8] (http://www.w3.org/TR/CSS2 /visudet.html#line-height). Ma non è una lettura facile. – Alohci

Set-allineamento verticale in cima sul pulsante. Questo lo aggiusterà.

fonte

2012-07-15 18:42:44 banzomaikaka

aha che funziona anche, c'è qualche "correzione" che posso aggiungere al mio reset di stile per tutti gli elementi che cureranno anche questo? In caso contrario, sceglierò tra le risposte di lavoro, e lo userò solo dove noto questo problema :) – Fumbles

Direi che è meglio perché non intaserai l'altezza della linea div (aggiungi un altro elemento in linea al div e sembrerà strano. Perché? L'altezza della linea sarà 0. Puoi comunque scavalcare ma è un lavoro non necessario, davvero). Sul mio foglio di stile reset credo di avere qualcosa come pulsante, input, textarea {vertical-align: top;/* tra l'altro * /}. Svilupperò comunque la mia risposta per spiegare perché il top verticale-align funziona e perché ne hai bisogno in primo luogo. Dammi 10 minuti. – banzomaikaka

Fantastico, spero solo che un tale comportamento stravagante sia stato eliminato dalle specifiche in quanto sembra non fare bene lol – Fumbles

spazio inspiegabile sopra PULSANTE all'interno DIV

risposta

Problemi correlati