Solved

How to made the distance alwayl equal between paragraph

Posted on 2015-01-16
10
125 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
Independent Software Vendors: 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!

 

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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Introduction In this tutorial, I'll explain how to create an animated progress meter in a wireframe prototype developed using Axure RP 7.0 - a leading prototyping tool for designing web sites and software. (For more information about Axure and gett…
Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL several years ago, it seemed like now was a good time to update it for object-oriented PHP.  This article does that, replacing as much as possible the pr…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

752 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