How can I add spaces between two input lines using CSS

Question

I want to control the layout with CSS  How can I regulate the spaces between  lt input gt  elements I hope they are on two lines  using CSS    x000D   x000D   lt form name  publish  id  publish  action  publishprocess php  method  post  gt  x000D    Title  lt input type  text  id  title  name  title  size  60  maxlength  110  value   lt  php echo  title   gt    lt br  gt  x000D     lt div gt Contact lt input type  text  id  contact  name  contact  size  24  maxlength  30  value   lt  php echo  contact   gt     gt  lt  div gt  lt br  gt  Task description You may include task description  requirements on bidders  time requirements etc   lt br  gt  x000D     lt textarea name  detail  id  detail  rows  7  cols  60  style  font-family Arial  Helvetica  sans-serif  gt  lt  php echo  detail   gt  lt  textarea gt  x000D   x000D     lt br  gt  lt br  gt  price  lt input type  text  id  price  name  price  size  10  maxlength  20  value   lt  php echo  price   gt     gt  lt br  gt  x000D     lt label gt  Skill or Knowledge Tags lt  label gt  lt br  gt  lt input class  tagvalidate  type  text  id  tag  name  tag  size  40  maxlength  60  value   lt  php echo  tag   gt     gt  x000D     lt br  gt  lt label gt Combine multiple words into single-words  space to separate up to 3 tags lt br  gt  Example photoshop quantum-physics computer-programming  lt  label gt  lt br  gt  lt br  gt  District Restriction  x000D     lt  php echo  locationtext  cityname    gt  lt br  gt  lt br  gt  x000D   x000D     lt input type  submit  id  submit  value  submit    gt  lt  form gt  x000D   x000D   x000D    As you see  I use  lt br  gt  to separate  elements and get spaces  is there a better way to do it

User · Answer

You don t need to wrap everything in a DIV to achieve basic styling on inputs   input type  text    margin  0 0 10px 0    will do the trick in most cases   Semantically  one  lt br  gt  tag is okay between elements to position them  When you find yourself using multiple  lt br  gt  s  which are semantic elements  to achieve cosmetic effects  that s a flag that you re mixing responsibilities  and you should consider getting back to basics

User · Answer

Try to minimize the use of  lt br gt  as much as you possibly can  HTML is supposed to carry content and structure   lt br gt  is neither  A simple workaround is to wrap your input elements in  lt p gt  elements  like so    lt form name  publish  id  publish  action  publishprocess php  method  post  gt        lt p gt  lt input type  text  id  title  name  title  size  60  maxlength  110  value   lt  php echo  title   gt     gt  - Title lt  p gt       lt p gt  lt input type  text  id  contact  name  contact  size  24  maxlength  30  value   lt  php echo  contact   gt     gt  - Contact lt  p gt        lt p gt Task description  you may include task description  requirements on bidders  time requirements  etc   lt  p gt       lt p gt  lt textarea name  detail  id  detail  rows  7  cols  60  style  font-family Arial  Helvetica  sans-serif  gt  lt  php echo  detail   gt  lt  textarea gt  lt  p gt        lt p gt  lt input type  text  id  price  name  price  size  10  maxlength  20  value   lt  php echo  price   gt     gt  - Price lt  p gt        lt p gt  lt input class  tagvalidate  type  text  id  tag  name  tag  size  40  maxlength  60  value   lt  php echo  tag   gt     gt  - Skill or Knowledge Tags lt  p gt       lt p gt Combine multiple words into single-words  space to separate up to 3 tags  example photoshop quantum-physics computer-programming  lt  p gt        lt p gt District Restriction  lt  php echo  locationtext  cityname    gt  lt  p gt        lt p gt  lt input type  submit  id  submit  value  Submit    gt  lt  p gt   lt  form gt

User · Answer

input       margin 0 0 10px 0

User · Answer

You can format them as table       x000D   x000D  form   x000D    display  table  x000D    x000D  label   x000D    display  table-row  x000D    x000D  input   x000D    display  table-cell  x000D    x000D  p1   x000D    display  table-cell  x000D    x000D   lt div id  header order form  align  center  gt  x000D     lt form id  order header  method  post  gt  x000D       lt label gt  x000D         lt p1 gt order no  x000D           lt input type  text  gt  x000D         lt  p1 gt  x000D         lt p1 gt order type  x000D           lt input type  text  gt  x000D         lt  p1 gt  x000D       lt  label gt  x000D       lt  br gt  x000D       lt  br gt  x000D       lt label gt  x000D         lt p1 gt  x000D          creation date  x000D           lt input type  text  gt  x000D         lt  p1 gt  x000D         lt p1 gt delivery date  x000D           lt input type  text  gt  x000D         lt  p1 gt  x000D         lt p1 gt billing date  x000D           lt input type  text  gt  x000D         lt  p1 gt  x000D       lt  label gt  x000D       lt  br gt  x000D       lt  br gt  x000D   x000D       lt label gt  x000D         lt p1 gt sold to party  x000D           lt input type  text  gt  x000D         lt  p1 gt  x000D         lt p1 gt sop address  x000D           lt input type  text  gt  x000D         lt  p1 gt  x000D       lt  label gt  x000D     lt  form gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

CSS   form div     padding  x    default div padding in the form e g  5px 0 5px 0     margin  y    default div padding in the form e g  5px 0 5px 0      divForText     For Text line only     padding  a    margin  b     divForLabelInput    For Text and Input line      padding  c    margin  d     divForInput    For Input line only     padding  e    margin  f      HTML    lt div class  divForText  gt some text lt  div gt   lt input         gt   lt div class  divForLabelInput  gt some label  lt input       gt  lt  div gt   lt div class  divForInput  gt  lt input       gt  lt  div gt

User · Answer

You can also wrap your text in label fields  so your form will be more self-explainable semantically   Just remember to float labels and inputs to the left and to add a specific width to them  and the containing form  Then you can add margins to both of them  to adjust the spacing between the lines  you understand  of course  that this is a pretty minimal markup that expects content to be as big as to some limit    That way you wont have to add any more elements  just the label-input pairs  all of them wrapped in a form element   For example    lt form gt   lt label for  txtName  gt Name lt  label gt   lt input id txtName  type  text  gt   lt label for  txtEmail  gt Email lt  label gt   lt input id txtEmail  type  text  gt   lt label for  txtAddress  gt Address lt  label gt   lt input id txtAddress  type  text  gt       lt input type  submit  value  Submit The Form  gt   lt  form gt    And the css will be   form  float left    to clear the floats of inner elements usefull if you wanna add a border or background image   width 300px    label  float left  width 150px  margin-bottom 10px    or whatever you want the spacing to be     input  float left  width 150px  margin-bottom 10px    or whatever you want the spacing to be

User · Answer

detail  margin-bottom 5px

[html] How can I add spaces between two <input> lines using CSS?

Examples related to html

Examples related to css

Examples related to layout