Matt Hutch Matt Hutch - 3 months ago 6
HTML Question

Cannot make my div tag move down using margin-top?

I'm trying to do here is give my username div a

margin-top:10%;

simple as that.

Here is an example of what it currently looks like live as you can see my username area is jammed right at the top of my content
div
.

All I wanted is to budge it down a tad. Any ideas on why or how to fix this?

CODE



input {
outline: none;
}
body {
font-family: sans-serif;
background-color: #222222;
}
#header {
color: #fff;
font-size: 25px;
text-align: center;
}
#content {
width: 60%;
height: 250px;
background-color: #303640;
margin-left: 20%;
}
#username {
width: 80%;
height: 40px;
background-color: #373e49;
margin-top: 10%;
margin-left: 10%;
border: 1px solid #373e49;
border-radius: 5px;
}
#usernameIcon {
width: 12%;
float: left;
margin-top: 10px;
}
.usernameIcon {
width: 20px;
height: 20px;
}
#usernameTextbox {
width: 88%;
float: right;
margin-top: 10px;
}
.tbUsername {
background-color: #373e49;
border-left: 2px solid #434a54;
border-right: none;
border-top: none;
border-bottom: none;
padding-left: 10px;
color: #fff;
}

<div id="header">
<p>Welcome</p>
</div>
<div id="content">
<form method="post" action="index.php">
<div id="username">
<div id="usernameIcon">
<img src="IMAGES/UsernameIcon.svg" class="usernameIcon">
</div>
<div id="usernameTextbox">
<input type="text" name="username" class="tbUsername" placeholder="Username">
</div>

</div>
<div id="password">

</div>
<div id="btnLogin">

</div>
</form>
</div>




Answer

set a padding-top:1px in your #content

input {
  outline: none;
}
body {
  font-family: sans-serif;
  background-color: #222222;
}
#header {
  color: #fff;
  font-size: 25px;
  text-align: center;
}
#content {
  width: 60%;
  height: 250px;
  background-color: #303640;
  margin-left: 20%;
  padding-top:1px /* NEW */
}
#username {
  width: 80%;
  height: 40px;
  background-color: #373e49;
  margin-top: 10%;
  margin-left: 10%;
  border: 1px solid #373e49;
  border-radius: 5px;
}
#usernameIcon {
  width: 12%;
  float: left;
  margin-top: 10px;
}
.usernameIcon {
  width: 20px;
  height: 20px;
}
#usernameTextbox {
  width: 88%;
  float: right;
  margin-top: 10px;
}
.tbUsername {
  background-color: #373e49;
  border-left: 2px solid #434a54;
  border-right: none;
  border-top: none;
  border-bottom: none;
  padding-left: 10px;
  color: #fff;
}
<div id="header">
  <p>Welcome</p>
</div>
<div id="content">
  <form method="post" action="index.php">
    <div id="username">
      <div id="usernameIcon">
        <img src="IMAGES/UsernameIcon.svg" class="usernameIcon">
      </div>
      <div id="usernameTextbox">
        <input type="text" name="username" class="tbUsername" placeholder="Username">
      </div>

    </div>
    <div id="password">

    </div>
    <div id="btnLogin">

    </div>
  </form>
</div>

Comments