Rapid Tutorial 2

Inline Elements and White Space

During my course of development. I find that most of the people are confused with whitespace appearing in between and are not sure as to why its occuring in the first place.

This tutorial's main aim is to make people understand why whitespace occurs in between elements and how to fix this.

White space occur mainly when we are having elements inside an inline element or an inline-block element. For example, if you say a div is inline or inline-block then all the text contents inside the div acts like an inline block element.

  
    <div>
      <p> some text </p>
      <p> some text 2 </p>  
    </div>
    

So the elements that you create inside the tag is treated like a text, so the next line character, any space you press, all are considered as white space within this block.

There are lot of solutions to this problem.
1. You can write the block in single line to omit the white space.
2. You can give a margin-left of -4px whitespace normally occupies 4px space.
3. you can comment out the code like this

  
    <div><!-- 
    --><p> some text </p><!--
    --><p> some text 2 </p><!-- 
  --> </div>
  

4. last and the most best solution is give font size 0 to the parent and set font size for the child elements.

Written on June 14, 2015