CODEWITHSUNDEEP
htmlcss
user3673275
user3673275

Reputation: 43

How to position label text with css

So I'm making a simple login form and I want position these two label texts on top their respective inputs instead of having this big space gap. Fairly new sorry.

HTML

<form>
<fieldset>
    <label>Username
        <input type="username" class="button-user">
    </label>
    <label>Password
        <input type="password" class="button-pw">
    </label>
</fieldset>
<fieldset class="button-space">
    <input type="submit" class="button">
</fieldset>
</form>

CSS

fieldset {
width: 200px;
}
.button-space {
height: 50px;
background: #f0f0f2;
border-top: 1px;
}
.button {
margin-top: 13px;
}
.button-pw {
margin-top: 20px;
}
.button-user {
margin-top: 20px;
}

http://jsfiddle.net/ypNUU/

Upvotes: 1

Views: 3221

Answers (4)

MrMAG
MrMAG

Reputation: 1264

That should solve it ;)

fieldset {
    width: 200px;
}
.button-space {
    height: 50px;
    background: #f0f0f2;
    border-top: 1px;
}
.button {
    margin-top: 13px;
}
.button-pw {
    display:block;
    margin-bottom:20px;
}
.button-user {
    display:block;
    margin-bottom:20px;
}

http://jsfiddle.net/ypNUU/5/

And if you don't want that gap space between the PW-textbox and then button, then set margin-bottom to 0px in .button-pw
http://jsfiddle.net/ypNUU/6/

Upvotes: 0

Billy Moon
Billy Moon

Reputation: 58531

Make the following changes...

/*.button-pw {
    margin-top: 20px;
}*/
.button-user {
    /*margin-top: 20px;*/
    margin-bottom: 20px;
}

And it will look like...

login form screenshot

Demo: http://jsfiddle.net/ypNUU/4/

Upvotes: 0

illico-it
illico-it

Reputation: 21

Hi you can change the margin-to like this

.button-pw {
    margin-top: 0px;
}
.button-user {
    margin-top: 0px;
}

Upvotes: 0

RichieHindle
RichieHindle

Reputation: 281485

Remove these rules:

.button-pw {
    margin-top: 20px;
}
.button-user {
    margin-top: 20px;
}

They are adding the gap between the labels and the fields. Fiddle here.

Upvotes: 2

Related Questions