1. casa
  2. Domanda e risposta
  3. HTML/CSS: la spaziatura extra sopra e sotto l'immissione di testo di tipo

HTML/CSS: la spaziatura extra sopra e sotto l'immissione di testo di tipo

2012-11-17 10 views
8

vivo esempio: http://jsfiddle.net/yDQXG/HTML/CSS: la spaziatura extra sopra e sotto l'immissione di testo di tipo

Quello che vedo in Chrome: http://i.imgur.com/shLfA.png

io non riesco a capire dove la spaziatura attorno all'elemento di ingresso (campi blu) viene da. Qualche idea?

<form method="get"> 
<fieldset class="halfblock"> 
    <input class="blockheader" type="text" value="Field A"> 
    <textarea class="blocktext" rows="5">Line 1&#13;&#10;Line 2</textarea> 
</fieldset> 
</form>

fonte

2012-11-17 JohnB

+2

foglio di stile esterno sarebbe di gran lunga l'opzione migliore in quanto è possibile memorizzare nella cache ... quindi la velocità di caricamento della pagina sarebbe più veloce –

+0

qual è la differenza? –

+1

@NullPointer, sono sicuro che questo è solo un esempio. Il tuo commento non sta davvero contribuendo a una soluzione o ti aiuta a chiarire la domanda. – Mikuso

risposta

6

È perché sono elementi in linea. La stessa cosa accade spesso con le immagini.

Tutto quello che dovete fare è aggiungere display:block agli ingressi:

input.blockheader { 
    margin: 0; 
    padding: 0; 
    text-align: center; 
    background: #ABD9E2; 
    font: 11px/11px 'Vollkorn', serif; 
    border: none; 
    width: 100%; 
    position: relative; 
    /* top: -7px; */ 

    display: block; 
}

fonte

2012-11-17 18:24:37 coopersita

+0

Solo una cosa, questo non funzionerà per Firefox se si hanno a che fare con problemi di larghezza, il blocco di visualizzazione sul proprio input causerà un overflow dell'input il suo contenitore. @KingKingFrog risposta di seguito ha funzionato alla grande per me. – Lowtrux

4

imposta altezza riga: 0px; su .halfblock

.quote_body .halfblock { 
    width: 262px; 
    border: 1px dotted 
    #333; 
    float: left; 
    margin-bottom: 15px; 
    line-height: 0px; 
}

fonte

2012-11-17 18:21:49 Brian

3

Aggiungere il tag display ai CSS dell'ingresso:

input.blockheader { 
    display: block; 
}

Problema risolto.

fonte

2012-11-17 18:23:50

Problemi correlati

 Problemi correlati