How to made the distance alwayl equal between paragraph

One way would be just to use paragraph tags, <p>  instead of div tags, <div>. That's what <p> tags do. They automatically format text into equally spaced paragraphs.

http://plnkr.co/edit/dmdC2yFI3GuVXNs1bpfG?p=preview

How do I change the gaps between paragraph? if I use margin css, the problem come again.

I'm not sure how you are applying the margin, but in my test I can add the same amount to both top and bottom and I get equal spacing between paragraphs.

.subclass{
  border: 1px solid black;
  margin:2em 0;
}
.baseclass{
  border: 1px solid blue;
  padding:10px;
}

Is there anyway to make all gaps equally?
distance.png

Everything I've done so far results in equal gaps between paragraphs in my Plunker. I cannot see from that image what you are doing differently to get that result. Do another Plunker or something so I have some code to look at.

Hi Tom,
U've done great in gaps equally between paragraphs (1st gap = 3st gap) , what I want to be better is 1st gap = 2nd gap = 3rd gap (in my picture)

Wrong! The Plunker sample I've provided produces equal gaps, 1st, 2nd and 3rd. I have also described how to adjust the height of the gaps in a way that preserves the equal spacing. I have looked at the results on Firefox, Chrome and Safari, all latest versions. Equal gaps everywhere I look.
Show me the code that you are using to produce unequal gaps. Tell me what browser and version where this occurs for you. No more pictures. Pictures tell me nothing.

It doesn't look the same. The second gap is smaller.

http://plnkr.co/edit/ae7wfRbet7RFx0q1wfo7?p=preview

perfect solution. Thanks Tom.