Solved

How to made the distance alwayl equal between paragraph

Posted on 2015-01-16
10
116 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
  • 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
Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

 

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 500 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

Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
File names with & character 6 78
Problem to get function 52 108
Examples of Web API, REST web services and SOA 7 238
replace quotes with UTF-8 character 38 98
Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa…
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…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

831 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