It seems impossible to have 2 blank lines between

问题:

Here is another for my previous question:

Is it impossible to have 2 blank lines between p tag? Markdown

After various comments given, I once thought I can manage it;

in fact, I cannot.

--------

br

--------
A
B
--------

p tag

--------

A

B

--------

OK, now, I want to insert 2 lines instead of 1 between A and B elements without any modification of the original elements;

The result I expect is like this (br emulation)

--------

A


B

--------

trying with p tag

--------

A

 

B

--------

Ouch!! 3 lines inserted instead of 2.

so, is there no way to do this by HTML and CSS??

The code: http://jsfiddle.net/LhDFs/9/

--------<br>
## br<br>
--------<br>
A<br>B
<br>--------<br>
## p tag
<br>--------
<p>A</p>
<p>B</p>
--------<br>
## OK, now, I want to insert 2 lines instead of 1 between A and B elements without any modification of the original elements;<br>
## The result I expect is like this (br emulation)
<br>--------<br>
    <br>
A<br><br><br>B
    <br>
<br>--------<br>
## trying with p tag 
<br>--------<br>
<p>A</p>
<p style = 'margin: 0;'>&nbsp;</p>
<p>B</p>
--------<br>
## Ouch!! 3 lines inserted instead of 2.
<br> ## so, is there no way to do this by HTML and CSS??

Edit: some people mention that my understanding to HTML is immature, well I won't deny it; however, what people said is about HTML restriction.

To make things clearer, this is for HTML+js coding, not static. So, again I want to insert 2 (or any number ) lines instead of 1 between A and B elements without any modification of the original elements;

Because the function is not to modify the original context but to insert blank lines. What I intend is to insert things. When I insert things, if I need to modify the original context, more complicated and things generally don't go well. So, if it is really impossible to insert exact lines between original elements, I gave up and make a mess to modify original context. What I would like to know is if it's possible or impossible.

If it's really impossible, just tell me so instead of giving me some codes.

Thank you.

Edit:

I conclude it is not possible to insert the exact lines as long as the default paragraph tag context exists.

So, instead, the whole context should be constructed with 'noMargin' paragraph tag.

http://jsfiddle.net/LhDFs/10/

<p class="noMargin">No margin</p>
<p class="noMargin">&nbsp;</p>
<p class="noMargin">&nbsp;</p>
<p class="noMargin">No margin</p>

css

p.noMargin {
    margin: 0;
}　

or simply

<p>No margin</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>No margin</p>

css

p{
    margin: 0;
}　

The credit goes to

@3dgoo

Is it impossible to have 2 blank lines between <p> tag? Markdown

Thank you everyone, and if someone had unpleasant feelings on my post, my apologies.

回答1:

Ok, let's get back to html basics, probably it'll help!

First of all, a p tag is a block element that contains inline elements.
Short tutorial here: http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

So p is a paragraph, and br means a line breaks. In fact, you divides your content in paragraph, and sometimes your need to change line with line breaks. If you want to have, lets say:

text A


text B

Then you should have two different paragraphs:

<p style="margin-bottom: 1em;">text A</p>
<p>text B</p>

(ok, put you css in a different file, not inline)

The margin push the other paragraph. For line breaks, it should look like this:

text A
text B

<p>text A<br>text B</p>

I keep the paragraph around all, but a line break in it.

And applying margin-bottom to p in css, all your paragraph will have the same distance! A bit like the style thing with normal, header 1, header 2... in Word where you can decide margin before and after.

Hope it helps!

EDIT:

You can do it with Javascript, or I prefer to use jQuery that way:
(in jQuery coding)

$('p').each(function() {
    var $this = $(this);
    if ($this.html() == ' ') {
        $this.remove();   
    }
});

You can use regex, for example. I removed the p tag containing the non breaking space because it add a full paragraph between. Keep two different paragraph so it will be easier to put some margins and control everything with css (like I said a the top of my answer. Don't try to add br or p between, but margins!). With br, you need 3 br to skip two lines between.

Is that what you need? If not, please be more clear!

回答2:

I will show you the Right Way to do it. Which is very easy to understand, improve upon, and modify in future.

http://jsfiddle.net/techsin/FDK7P/

Oh and css is not javascript

css code .double-space {margin-top:2em;} then apply class attribute to whatever paragraph you want to have double space. But if you want to do it the first way i did it, using pseudo selectors, then it's fine but more work and inefficient.

But there is a way to do it other ways...

http://jsfiddle.net/techsin/FDK7P/1/

I recommend the first way of doing it...because look at pictures below

Css Styles in gray are applied by browser automatically/default values for

or block elements.

So therefore we make 1em to 2em for whichever paragraph we want to modify. Which overrides the default value of 1em.

回答3:

You 'see' three lines because the A and B paragraphs (p elements) add up their own margin. You need to style those elements to achieve what you need.

Something like this (obviously is better to use css classes instead of style attribute:

<p style='margin: 0;'>A</p>
<p style='margin: 0;'>&nbsp;</p>
<p style='margin: 0;'>B</p>

回答4:

Try to style it like one of these

<p style="margin-bottom: 10px;">text</p>
<p style="line-height: 200%;">text</p>

A line height in percent of the current font size