4 Replies - 182 Views - Last Post: 05 May 2020 - 02:59 PM

#1 HappyNewb   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 30
  • Joined: 28-April 20

How can I move my labels closer to my inputs?

Posted 05 May 2020 - 02:03 PM

hi guys

i attached screen shot.

im trying to move my username and password labels a bit down closer to the inputs. but im battling
i dont know why there is a gap there.
whats the best way to do this?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Login</title>
    <link rel="stylesheet" type="text/css" href="my-login.css">
</head>
<body>
    <form class="form">
        <h2>Please login:</h2>
        
        <label for="username">username</label>
        <input type="username">

        <label id="password" for="password">password</label>
        <input type="password">
        
        <div>
            <input type="submit">
        </div>
    </form>

  
</body>
</html>




css



.form {
    color: white;
    font-size: 32px;
    width: 45%;
    margin: 20%;
    padding: 5px 30px 60px 30px;
    text-align: center;
    background: purple;
}

body {
    background-size: cover;
    background-image: url("images/MountainBG.png");
}

label {
    display: block;
}








Is This A Good Question/Topic? 0
  • +

Replies To: How can I move my labels closer to my inputs?

#2 HappyNewb   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 30
  • Joined: 28-April 20

Re: How can I move my labels closer to my inputs?

Posted 05 May 2020 - 02:09 PM

cant upload file, dont know why

tried both jpg and png both under 1mb
Was This Post Helpful? 0
  • +
  • -

#3 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15781
  • View blog
  • Posts: 63,250
  • Joined: 12-June 08

Re: How can I move my labels closer to my inputs?

Posted 05 May 2020 - 02:11 PM

Mash that F12 developer tool button in your browser! You can tick on and off your style sheet to tweak with things in, for the most part, real time.

If you turn on/off your font size you'll see the spacing increases as well.

You could apply a 'margin-bottom' tweak to a negative value, but that gets messy. Poke around and eyeball the 'line-height' option!

https://www.w3school...line-height.asp
Was This Post Helpful? 0
  • +
  • -

#4 HappyNewb   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 30
  • Joined: 28-April 20

Re: How can I move my labels closer to my inputs?

Posted 05 May 2020 - 02:48 PM

thanks modi,

worked like a dream! learnt a lot
Was This Post Helpful? 0
  • +
  • -

#5 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15781
  • View blog
  • Posts: 63,250
  • Joined: 12-June 08

Re: How can I move my labels closer to my inputs?

Posted 05 May 2020 - 02:59 PM

Like in youtube subscribe buttons, mashing F12 blows up the world of knowledge.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1