如何在块元素之间添加垂直间距，但不是顶部和底部

假设我有一堆P，LI或DIV元素，它们之间没有任何内容。我想控制它们之间的垂直间距，所以它们不太适合。但我不想添加任何空间顶部和底部，因为这是由父元素处理，我不需要更多。有没有简单的方法来做到这一点，适用于所有块元素？如何在块元素之间添加垂直间距，但不是顶部和底部

说我有这样的事情：

p { 
    margin: 5px 0; 
    }

然后

<div> 
    <p>1</p> 
    <p>2</p> 
    <p>3</p> 
    <p>4</p> 
</div>

但我不想为5px上述第1页，或低于第4页，因为DIV已经有填充，我不想去搞乱。我只是想在p 1和p 2，p 2和p 3之间的10px等

我敢肯定我可以做一些事情（而且我有很多次），但我正在寻找更干净的东西，我不会对于这种常见情况，不必做很多特殊的工作。

来源

2012-04-25 rob

你能举一个你尝试过的例子吗？只是文字不足以理解你的问题。 – Murtaza 2012-04-25 04:41:08

请清楚你想要什么 – sandeep 2012-04-25 04:42:25

对不起，编辑。 – rob 2012-04-25 04:58:32

使用相邻选择

p + p { margin-top: 10px; }

基本上概念是，如果一个p来自后之间的另一p给予10px的余量。

您使用类似于

p + p, li + li, div + div { 
    margin-top: 10px; 
}

来源

2012-04-25 04:44:38 Starx

p, li, div { 
    margin-bottom: 10px; 
} 
#parentID { 
    margin-bottom: -10px; 
}

来源

2012-04-25 04:42:46 kayen

谢谢，但那混乱是我现在做的。希望有一个更清洁的方式。 – rob 2012-04-25 04:59:48

这个东西也可以用:last-child或:first-child

下面是一个例子来完成：

p, li, div { 
    margin-bottom: 10px; 
} 

p:last-child, li:last-child, div:last-child { 
    margin-bottom: none; 
}

来源

2012-04-25 04:50:27 Starx

最好如果你把这个在你以前的答案:) – sandeep 2012-04-25 04:55:06

@sandeep，其实看到[this]（http://meta.stackexchange.com/questions/25209/what-is-the-official-etiquette-on-answering - 一个问题两次），它是一个有效的第二个答案 – Starx 2012-04-25 05:01:16

我从一年使用stackoverflow和我从来没有看到一个人给同一个问题两个答案。他们在相同的答案中增加了另一种选择。 – sandeep 2012-04-25 05:03:27

可以使用adjacent selector秒。你可以这样定义：

p + p{ 
margin-top:0; 
}

p ~ p{ 
margin-top:0; 
}

来源

2012-04-25 04:59:15 sandeep

p { margin: 10px 0 0 0; } 
p:first-child { margin: 0; }

也就是说，设置10px的的上边距为所有p元素和其他利润为零，除了第p元素，您甚至可以将顶部边距设置为零。

这比许多其他方法更为广泛，它们使用旧版浏览器不支持的上下文选择器。要获得真正最大的浏览器支持，您需要为标记中的第一个p元素指定一个类，并使用类选择器而不是p:first-child。

这是最简单的方法，因为CSS在元素上操作，而不是元素之间的操作。因此，您需要一些方法来区分p元素序列中的第一个元素。

请注意，p { margin: 5px 0; }（在问题中提到）将创建5px的纵向边距，而不是10px，因为相邻的垂直边距会折叠。

来源

2012-04-25 05:14:18

如何在块元素之间添加垂直间距，但不是顶部和底部

回答

相关问题