-4

这是我之前的问题的另一个：

p标签之间不可能有2个空行吗？降价

在给出了各种评论之后，我曾经认为我可以做到；

事实上，我不能。

--------

br

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

p标签


--------

一个

乙

--------

好的，现在，我想在 A 和 B 元素之间插入 2 行而不是 1 行，而不对原始元素进行任何修改；

我期望的结果是这样的（br仿真）


--------

A


B

--------

尝试使用 p 标签


--------

一个

 

乙

--------

哎哟！！插入 3 行而不是 2 行。

那么，有没有办法通过 HTML 和 CSS 做到这一点？

代码：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??

编辑：有人说我对HTML的理解还不成熟，我不否认；但是，人们所说的是关于 HTML 限制。

为了让事情更清楚，这是针对 HTML+js 编码的，而不是静态的。因此，我想再次在 A 和 B 元素之间插入 2 行（或任意数量）而不是 1 行，而不对原始元素进行任何修改；

因为函数不是修改原来的上下文而是插入空行。我打算插入东西。当我插入东西时，如果我需要修改原来的上下文，更复杂，事情通常不会顺利。所以，如果真的不可能在原始元素之间插入精确的线条，我就放弃了修改原始上下文并弄得一团糟。我想知道的是它是可能的还是不可能的。

如果真的不可能，请告诉我，而不是给我一些代码。

谢谢你。

编辑：

我的结论是，只要存在默认的段落标签上下文，就不可能插入确切的行。

因此，整个上下文应该使用“noMargin”段落标签来构建。

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;
}　

或者干脆

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

css

p{
    margin: 0;
}　

功劳归于

@3dgoo

<p> 标签之间不可能有 2 个空行吗？降价

谢谢大家，如果有人对我的帖子有不愉快的感觉，我很抱歉。

4

4 回答 4

1

我将向您展示正确的方法。这很容易理解、改进和将来修改。

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

哦，css不是javascript

css 代码.double-space {margin-top:2em;}然后将 class 属性应用于您想要双倍空格的任何段落。但是如果你想按照我做的第一种方式来做，使用伪选择器，那么它很好，但工作量更大且效率低下。

但是还有其他方法可以做到这一点......

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

我推荐第一种方法......因为看看下面的图片

默认保证金

灰色的 Css 样式由浏览器自动应用/默认值

或块元素。

因此，我们将要修改的任何段落设置为1em到2em 。这会覆盖默认值 1em。 在此处输入图像描述

于 2013-08-02T05:58:43.400 回答
0

您“看到”三行是因为 A 和 B 段落（p 元素）加起来了它们自己的边距。您需要对这些元素进行样式设置以实现您所需要的。

像这样的东西（显然最好使用 css 类而不是 style 属性：

<p style='margin: 0;'>A</p>
<p style='margin: 0;'>&nbsp;</p>
<p style='margin: 0;'>B</p>
于 2013-08-02T03:56:43.217 回答
0

尝试将其设计为其中之一

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

以当前字体大小百分比表示的行高

于 2013-08-02T03:59:18.480 回答
0

好的，让我们回到 html 基础知识，可能会有所帮助！

首先，ap标签是一个包含内联元素的块元素。
此处的简短教程：http ://www.webdesignfromscratch.com/html-css/css-block-and-inline/

所以 p 是一个段落，而 br 表示换行符。实际上，您将内容划分为段落，有时您需要用换行符换行。如果你想拥有，让我们说：

文字A


文字B

那么你应该有两个不同的段落：

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

（好的，把你的css放在一个不同的文件中，而不是内联）

边距推另一段。对于换行符，它应该如下所示：

文字A
文字B

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

我保留了整个段落，但其中有一个换行符。

并在 css 中将 margin-bottom 应用于 p ，您的所有段落都将具有相同的距离！有点像 Word 中正常的样式，标题 1，标题 2...，您可以在其中决定前后边距。

希望能帮助到你！

编辑：

你可以用 Javascript 来做，或者我更喜欢这样使用 jQuery：（
在 jQuery 编码中）

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

例如，您可以使用正则表达式。我删除了包含不间断空格的 p 标记，因为它在它们之间添加了一个完整的段落。保留两个不同的段落，以便更容易放置一些边距并使用 css 控制所有内容（就像我在答案的顶部说的那样。不要尝试在其间添加 br 或 p，而是添加边距！）。使用 br，您需要 3 个 br 来跳过其间的两行。

那是你需要的吗？如果不是，请更清楚！

于 2013-08-02T04:00:41.667 回答