Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

How to made the distance alwayl equal between paragraph

Posted on 2015-01-16
10
Medium Priority
?
139 Views
Last Modified: 2015-01-19
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
Comment
Question by:Dao Nguyen
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
10 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40555056
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
 

Author Comment

by:Dao Nguyen
ID: 40555240
How do I change the gaps between paragraph? if I use margin css, the problem come again.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40555368
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
Plesk WordPress Toolkit

Plesk's WordPress Toolkit allows server administrators, resellers and customers to manage their WordPress instances, enabling a variety of development workflows for WordPress admins of all skill levels, from beginners to pros.

See why 2/3 of Plesk servers use it.

 

Author Comment

by:Dao Nguyen
ID: 40555521
Is there anyway to make all gaps equally?
distance.png
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40555805
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
 

Author Comment

by:Dao Nguyen
ID: 40555887
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40556105
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
 

Author Comment

by:Dao Nguyen
ID: 40557071
It doesn't look the same. The second gap is smaller.

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

Accepted Solution

by:
Tom Beck earned 2000 total points
ID: 40557491
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
 

Author Comment

by:Dao Nguyen
ID: 40558041
perfect solution. Thanks Tom.
0

Featured Post

Learn how to optimize MySQL for your business need

With the increasing importance of apps & networks in both business & personal interconnections, perfor. has become one of the key metrics of successful communication. This ebook is a hands-on business-case-driven guide to understanding MySQL query parameter tuning & database perf

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

660 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question