web-dev-qa-db-fra.com

Margin-top ne fonctionne pas avec <label>

J'essaie simplement de déplacer le libellé de l'e-mail et de le saisir un peu en attribuant une classe "brtop" au libellé.

.brtop ajoute juste une marge supérieure.

Ne semble rien faire, ai-je fait quelque chose de mal?

/* 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>
htmllabel
22
Larry

Ajouter display:inline-block à votre règle 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>

Étant donné que votre étiquette s'affiche en tant qu'élément en ligne, la marge supérieure n'aura aucun effet.

Les propriétés de marge spécifient la largeur de la zone de marge d'une boîte. La propriété raccourcie "marge" définit la marge pour les quatre côtés tandis que les autres propriétés de marge définissent uniquement leur côté respectif. Ces propriétés s'appliquent à tous les éléments, mais les marges verticales n'auront aucun effet sur les éléments en ligne non remplacés. - W

49
j08691

<label> est display: inline. Si vous ajoutez display: inline-block à .brtop il respectera la marge.

6
Explosion Pills