Margin-top không hoạt động với <label>

Question

Tôi đang cố gắng di chuyển nhãn email và nhập xuống một chút bằng cách gán một lớp 'lốm đốm' cho nhãn.

.brtop chỉ thêm một lề trên.

Dường như không làm gì cả, tôi có làm gì sai không?

/* 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

Thêm display:inline-block vào quy tắc chi tiết của bạn.

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

jsFiddle example

Kể từ nhãn của bạn được hiển thị như một yếu tố nội tuyến, các lề trên sẽ không có bất kỳ ảnh hưởng.

Thuộc tính ký quỹ chỉ định chiều rộng của vùng lề của hộp. Thuộc tính viết tắt của ' ' lề 'đặt lề cho tất cả bốn bên trong khi các thuộc tính lề khác chỉ thiết lập mặt tương ứng của chúng. Các thuộc tính này áp dụng cho tất cả các phần tử, nhưng lợi nhuận theo chiều dọc sẽ không có bất kỳ tác động nào lên các phần tử nội tuyến không được thay thế. - W3

Answer 2

<label> là display: inline. Nếu bạn thêm display: inline-block vào .brtop, nó sẽ tôn trọng lề.