Margin-top funktioniert nicht mit <label>
Ich versuche nur rauszubekommen die E-Mail-label und input ein wenig nach unten durch die Zuordnung der Klasse 'brtop' auf das Etikett.
.brtop
fügt nur einen oberen Rand.
Nicht zu sein scheinen etwas zu tun, habe ich etwas falsch gemacht?
CSS:
/* html5doctor.com Reset v1.6.1 - http://cssreset.com */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}
/* ^^CSS_RESET^^ --- vv CSSforsite vv */
form{
width:500px;
padding:1.5em;
overflow:hidden;
border:1px solid red;
}
fieldset{
float:left;
border:none;
margin-left:1em;
}
.brtop{
margin-top:5px;
}
input{
}
HTML:
<form name="messageform">
<fieldset>
<label for="username" >Name:</label><br/>
<input type="text" name="username"/><br/>
<label for="email"class="brtop">Email:</label><br/>
<input type="text" name="email"/>
</fieldset>
<fieldset>
<label>Message:</label><br/>
<textarea name="message" cols="20" rows="4"></textarea>
</fieldset>
</form>
Du musst angemeldet sein, um einen Kommentar abzugeben.
Hinzufügen
display:inline-block
zu Ihrem brtop Regel.jsFiddle-Beispiel
Da Ihr label ist die Anzeige als inline-element, den oberen Rand nicht beeinflussen.
<label>
istdisplay: inline
. Wenn Sie hinzufügendisplay: inline-block
zu.brtop
es wird hinsichtlich der Marge.