• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 156
  • Last Modified:

How to made the distance alwayl equal between paragraph

Hi experts,
I want to make distance from paragraph always equal. How can I achieve this only use css.
http://plnkr.co/edit/djNAjTezn7xIuo6a7ZgS?p=preview

I appreciate any help from you.

Thanks.
distance.png
0
Dao Nguyen
Asked:
Dao Nguyen
  • 5
  • 5
1 Solution
 
Tom BeckCommented:
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
0
 
Dao NguyenApplication DeveloperAuthor Commented:
How do I change the gaps between paragraph? if I use margin css, the problem come again.
0
 
Tom BeckCommented:
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;
}
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Dao NguyenApplication DeveloperAuthor Commented:
Is there anyway to make all gaps equally?
distance.png
0
 
Tom BeckCommented:
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.
0
 
Dao NguyenApplication DeveloperAuthor Commented:
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)
0
 
Tom BeckCommented:
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.
0
 
Dao NguyenApplication DeveloperAuthor Commented:
It doesn't look the same. The second gap is smaller.

http://plnkr.co/edit/ae7wfRbet7RFx0q1wfo7?p=preview
0
 
Tom BeckCommented:
Take out the top and bottom padding on the .baseclass and the gaps will be equal.

.subclass{
  border: 1px solid black;
  margin: 2em 0;
}
.baseclass{
  border: 1px solid blue;
  padding: 0 10px;
}
0
 
Dao NguyenApplication DeveloperAuthor Commented:
perfect solution. Thanks Tom.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now