Html 边距顶部不适用于 <label>

Margin-top not working with <label>

提问by Larry

I'm trying to just nudge the email label and input down a little by assigning a class 'brtop' to the label.

我试图通过为标签分配一个类“brtop”来微调电子邮件标签并输入一点。

.brtopjust adds a top margin.

.brtop只是增加了一个上边距。

Doesn't seem to be doing anything, have I done something wrong?

好像什么都没做，是不是我做错了什么？

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

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

回答by j08691

Add display:inline-blockto your brtop rule.

添加display:inline-block到您的 brtop 规则中。

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

/* 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;
  display: inline-block;
}

input {}

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

Since your label is displaying as an inline element, the top margin won't have any effect.

由于您的标签显示为内联元素，因此上边距不会产生任何影响。

Margin properties specify the width of the margin area of a box. The 'margin' shorthand property sets the margin for all four sides while the other margin properties only set their respective side. These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements. - W3

边距属性指定框边距区域的宽度。'margin' 速记属性设置所有四个边的边距，而其他边距属性仅设置它们各自的边。这些属性适用于所有元素，但垂直边距不会对未替换的内联元素产生任何影响。- W3

回答by Explosion Pills

<label>is display: inline. If you add display: inline-blockto .brtopit will respect the margin.

<label>是display: inline。如果你添加display: inline-block到.brtop它会尊重边距。