2016-04-04 13 views
0

Wenn ich eine Texteingabe direkt unter einem Etikettentext habe, gibt es eine Möglichkeit, etwas über dem Eingang und unterhalb des Etiketts zu puffern, indem man die beiden ein paar Pixel trennt?Pad zwischen Label und Eingabe (Typ = 'Text')?

Wenn ich am oberen Rand der Klasse des Eingabefelds eine Füllung hinzufüge, dehnt es die Unterseite der Box nach unten, während ihre Oberseite die gleiche Entfernung von der Beschriftung hat. Das Auffüllen der Unterseite des Etiketts hatte keine Auswirkungen. Ich habe die Anzeigestile auf w3 überprüft, um zu sehen, ob es ein Problem mit der Verwendung von display:block war, aber das sah nicht wie das Problem aus.

Sorry für die newbish Frage, ich bin neu in HTML/CSS. Ich werde weiter basteln und werde jede Hilfe zu schätzen wissen. Vielen Dank!

Das Markup:

 <label for='subject'style='display:block' class='label'> 
      What subject do you want to follow?<br> 
     <input type="text" id="subject" value="meaningOfLife" style="display:block" class='form-text'><br> 
    </label> 

Und die CSS:

.label{ 
    padding:5px 10px 0px 10px; 
    color: RGB(25,90,90); 
    font-size: 16; 
    font-weight: 8; 
    font-family: 'Open Sans Condensed', sans-serif;  
} 

Antwort

3

Ist es etwas, das Sie gesucht haben? Sie können es von ID wie diese ein einzelnes Element anwenden:

.label #subject { 
    margin-top: 5px; 
} 

Oder gelten Elemente für alle Eingangs innerhalb label Tag mit form-text Klassenname

verschachtelt
.label .form-text { 
    margin-top: 5px; 
} 

Um Marge auf alle Eingaben gelten =“ Text "Elemente verschachtelt in Etikett:

.label input[type="text"] { 
    margin-top: 5px; 
} 
+1

Eine kurze Erklärung von * warum * das funktioniert könnte hier hilfreich sein. –

+0

Großartig, vielen Dank für die schnelle Antwort und die Follow-up-Bearbeitung, das ist genau das, was ich gesucht habe. Wird akzeptiert, wenn es entsperrt wird. –