CODEWITHSUNDEEP
htmlformscss
TonalDev
TonalDev

Reputation: 583

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.

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

.form-inner
{
    /*background:url('../img/content-bg-top.png') no-repeat left top;*/
    min-height:278px;
    margin:-40px 0 0 0;
    padding:72px 72px 21px 36px;
    position:relative;
    z-index:1;
    font-size:14px;

    -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?

Upvotes: 1

Views: 1009

Answers (4)

zkanoca
zkanoca

Reputation: 9918

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]

A nice schematic example

Upvotes: 2

Felix G.
Felix G.

Reputation: 6691

I think .form-inner is the box around your form. If you want more space between your text boxes, you should style the .form-field class.

For example:

.form-field {
    padding-right:10px;
}

Upvotes: 1

Miljan Puzović
Miljan Puzović

Reputation: 5820

You can add margin-right property on .form-field class, but remember to set bigger width on form.

Upvotes: 1

Dawson
Dawson

Reputation: 7597

From styl.css (line 317) .form-field { ... margin: 0 0 3px } (bottom margin only...3px)

All 4 of those input boxes are inside containers with .form-field class.

One fix:

.form-field { margin:0 10px 3px }
.form-field:first-child { margin-left:0 }

(that may need to be margin-right. I've never worked with right to left text)

Upvotes: 1

Related Questions