Spacing between elements

Question

I m a complete begginer in CSS and HTML and I m building my first basic page for training   What I want do do now is have spacing between two elements without using  lt br gt   Currently I m using this    formClear     clear left    height 25px      It works for spacing but do you this a correct way to do it  Would lineheight work better   line-height  20px     What are your suggestions  Please remember I m starting to learn     Thank you

User · Answer

You do not need to create an element like the < br > tag, or any other spacer tag. What you should do is apply a style to the element that needs spacing around it.

Let's say the element you want to have space around is a DIV tag called "myelement".

<div class="myelement">
    I am content that needs spacing around it!
</div>

This is the style you would need to use.

 .myelement {
  clear:left;
  height:25px;
  margin: 20px;  // See below for explanation of this
 }

This is the style you can use to better understand CSS for beginners

.myelement {
  clear:left;
  height:25px;
  margin-top:20px;
  margin-right:20px;
  margin-bottom:20px;
  margin-left:20px;
 }

Also, avoid using the height: CSS property until you know what you are doing. You will run into some issues when using height that are harder to troubleshoot as a beginner.

User · Answer

In general we use margins on one of the elements  not spacer elements

User · Answer

Use a margin to space around an element    box           margin  top right bottom left       box           margin  10px 5px 10px 5px      This adds space outside of the element  So background colours  borders etc will not be included   If you want to add spacing within an element use padding instead  It can be called in the same way as above

User · Answer

If you want vertical spacing between elements  use a margin   Don t add extra elements if you don t need to

User · Answer

It depends on what exactly you want to accomplish  Let s assume you have this structure    lt p style  width 400px   gt      Lorem ipsum dolor sit amet  consectetuer adipiscing elit  Aenean commodo ligula eget dolor  Aenean massa  Cum sociis natoque penatibus et magnis dis parturient montes  nascetur ridiculus mus  Donec quam felis  ultricies nec  pellentesque eu  pretium quis  sem  Nulla consequat massa quis enim  Donec pede justo  fringilla vel  aliquet nec  vulputate eget  arcu  In enim justo  rhoncus ut  imperdiet a  venenatis vitae  justo  Nullam dictum felis eu pede mollis pretium  Integer tincidunt  Cras dapibus  Vivamus elementum semper nisi  Aenean vulputate eleifend tellus  Aenean leo ligula  porttitor eu  consequat vitae  eleifend ac  enim  Aliquam lorem ante  dapibus in  viverra quis  feugiat a  tellus  Phasellus viverra nulla ut metus varius laoreet   lt  p gt    If you want the space between the single lines to be bigger  you should increase  line-height   If you want the space at the end to be bigger  you should increase  margin-bottom   If you want the space at the end to be bigger  but have the background fill the space  or the border around the space  use   padding-bottom   Of course  there are also the corresponding values for space on the top   padding-top margin-top   Some examples    lt p style  line-height  30px  width  300px  border  1px solid black   gt       Space between single lines       Space between single lines      Space between single lines      Space between single lines      Space between single lines      Space between single lines      Space between single lines      Space between single lines  lt  p gt   lt p style  margin-bottom  30px  width  300px  border  1px solid black   gt       Space at the bottom  outside of the border      Space at the bottom  outside of the border      Space at the bottom  outside of the border      Space at the bottom  outside of the border      Space at the bottom  outside of the border      Space at the bottom  outside of the border      Space at the bottom  outside of the border      Space at the bottom  outside of the border      Space at the bottom  outside of the border  lt  p gt   lt p style  padding-bottom  30px  width  300px  border  1px solid black   gt       Space at the bottom  inside of the border      Space at the bottom  inside of the border      Space at the bottom  inside of the border      Space at the bottom  inside of the border      Space at the bottom  inside of the border      Space at the bottom  inside of the border      Space at the bottom  inside of the border      Space at the bottom  inside of the border      Space at the bottom  inside of the border  lt  p gt    here you can see this code in action  http   jsfiddle net ramsesoriginal H7qxd   Of course you should put your styles in a separate stylesheet  the inline code was just to show the effect   here you have a little schematic demonstration of what which value affects                                      line-height            content                                                             padding-bottom                    lt ----------------                    content                             border-bottom                                                                                                            -------------  lt ------------------             margin-bottom                                                                                      lt -------------------                                                                      -------------------------   lt ------------------------

[html] Spacing between elements

Examples related to html

Examples related to css

Examples related to spacing