Solved

How to made the distance alwayl equal between paragraph

Posted on 2015-01-16
10
123 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
Technology Partners: 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Disabling automatic web page translations 9 56
CSS: Element name is not scoping properly 4 79
CSS (line height?) issue 2 74
How to silent print from safari browser 6 285
I will show you how to create a ASP.NET Captcha control without using any HTTP HANDELRS or what so ever. you can easily plug it into your web pages. For Example a = 2 + 3 (where 2 and 3 are 2 random numbers) Session("Answer") = 5 then we…
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

763 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