CODEWITHSUNDEEP
htmlcsspositionspacing
Leon Gaban
Leon Gaban

Reputation: 39018

Where is this extra space coming from?

My Codepen: http://codepen.io/leongaban/pen/aFJfs

It has something to do with the .email-tip-icon and the tip-message because when I commented them out the spacing goes away. Each one seems to add more spacing... However I have the both the margin and padding set to 0

The extra spacing is between the email input field and the first name input field

enter image description here

Upvotes: 1

Views: 115

Answers (2)

Jeff Noel
Jeff Noel

Reputation: 7618

I have no idea where this comes from, but here is an easy fix:

#register-email{
    margin-bottom:-10px !important;
}
#register-firstname{
    margin-top:-40px !important
}

http://codepen.io/seraphzz/pen/AyvgG

Upvotes: -1

Moishy
Moishy

Reputation: 3648

Try making them position absolute and update accordingly. this should work:

#register-form .email-tip-icon, #register-form .password-tip-icon {
    position: absolute;
    width: 30px;
    padding: 0;
    margin: 0;
    left: 340px;
    z-index: 2;
    clear: both;
    background: red;
    top: 20px;
    }
    #register-form .tip-message {
    position: absolute;
    padding: 0;
    margin: 0;
    left: 374px;
    width: auto;
    height: auto;
    text-indent: 10px;
    background: url(http://leongaban.com/_projects/whoat/_HTML/img/gray-tip-triangle.png) no-repeat;
    z-index: 2;
    top: 25px;
    }

Upvotes: 5

Related Questions