align form with css

[wesley]

Hello,

 

I have make a form. But the form is not align. I want to have spece between the label and the input, like in the image. The dual column example you see space between the label and the input.

My question is: how can I make this?

My css is:

label{ display:block; color: white; margin:12px; padding: 12px; }input{ height:40px; width: 190px; font-size:20px;}

 

thanks in advance.

[niche]

We need to see more code. Else, look into the css box model, divs, and float

Edited September 18, 2015 by niche

[Ingolme]

1. Display the label as a block.
2. Set the width of the label to 50%. Since the input has a border it needs to be slightly less than 50% in width.
3. Float the label to the left and clear the left side of the label.
4. In order to align the label and input vertically you can set the line-height of the label and its parent element to a fixed value that's the same for both, then set the vertical-align of the input element to "middle"