Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Spacing form boxes

Spacing form boxes


I have a form on my page and i'm trying to give more space between the text Boxes.

I tried 'Padding' in all kind of ways but they seem to be grouped together, and whatever i try affect all 4 of them.

  • The page

If i'm not misstaking this is the Form's CSS for the boxes:

    /*background:url('../img/content-bg-top.png') no-repeat left top;*/
    margin:-40px 0 0 0;
    padding:72px 72px 21px 36px;

    -webkit-text-shadow:0 1px 0 rgba(255,255,255,0.4);
    -moz-text-shadow:0 1px 0 rgba(255,255,255,0.4);
    text-shadow:0 1px 0 rgba(255,255,255,0.4);

Any suggestions?

Problem courtesy of: TonalDev


padding values are for the distance between object's itself and inner content.

You should use margin key for each textboxes in the content which is classified as form-inner.

.form-inner input[type=text]
    margin: 10px 20px;

Margin defines the distances between object's itself and the other object next to it.

margin: [top] [right] [bottom] [left]

Solution courtesy of: zkanoca


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Spacing form boxes


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription