Margine superiore non funziona con <label>

Question

Sto provando a spostare leggermente l'etichetta e-mail e immettere un po 'assegnando una classe' brtop 'all'etichetta.

.brtop aggiunge solo un margine superiore.

Non sembra che stia facendo qualcosa, ho fatto qualcosa di sbagliato?

/* 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{ 
 
\t width:500px; 
 
\t padding:1.5em; 
 
\t overflow:hidden; 
 
\t border:1px solid red; 
 
} 
 
fieldset{ 
 
\t float:left; 
 
\t border:none; 
 
\t margin-left:1em; 
 
} 
 

 
.brtop{ 
 
margin-top:5px; 
 
} 
 

 
input{ 
 
}

<form name="messageform"> 
 
\t \t <fieldset> 
 
\t \t \t <label for="username" >Name:</label><br/> 
 
\t \t \t <input type="text" name="username"/><br/> 
 
\t \t \t <label for="email"class="brtop">Email:</label><br/> 
 
\t \t \t <input type="text" name="email"/> 
 
\t \t </fieldset> 
 
\t \t <fieldset> 
 
\t \t \t <label>Message:</label><br/> 
 
\t \t \t <textarea name="message" cols="20" rows="4"></textarea> 
 
\t \t </fieldset> \t \t 
 
\t </form>

Answer 1

Aggiungi display:inline-block alla regola di bromp.

.brtop { 
    margin-top:5px; 
    display:inline-block; 
} 

jsFiddle example

Dal momento che l'etichetta è la visualizzazione come un elemento inline, il margine superiore non avrà alcun effetto.

Le proprietà del margine specificano la larghezza dell'area del margine di una casella. La proprietà stenografica 'margine' imposta il margine per tutti e quattro i lati mentre le altre proprietà del margine impostano solo il rispettivo lato. Queste proprietà si applicano a tutti gli elementi, ma i margini verticali non avranno alcun effetto su elementi in linea non sostituiti. - W3

Answer 2

<label> è display: inline. Se aggiungi display: inline-block a .brtop, rispetterà il margine.