6
  • 容器#666有margin: 20px; overflow: hidden;.
  • 节点#333有margin: 20px 0 0 20px; float: left;.

例如， http: //jsbin.com/owejal/3/edit或图片：

双倍边距

但是，预期的结果是：

  • 具有 20px 边距的容器，
  • 中间有 20px 边距的子级，但不是容器。

在此处输入图像描述

这可以使用负填充（即如果容器有padding: -20px 0 0 -20px）来实现，尽管这样的东西不存在。

可以使用附加元素（http://jsbin.com/owejal/4/ ）来实现所需的结果，尽管我很想了解是否只有 CSS 解决方案。

4

6 回答 6

5

如果只关心元素之间的间距，可以丢弃伪元素。它只是为了背景。

http://codepen.io/cimmanon/pen/mucDv

<div class="foo"></div>
<div class="group">
  <div class="node"></div>
  <div class="node"></div>
  <div class="node"></div>
  <div class="node"></div>
  <div class="node"></div>
  <div class="node"></div>
  <div class="node"></div>
</div>
<div class="foo"></div>

CSS：

.group {
  overflow: hidden;
  margin: -10px 0 -10px 10px;
  padding-right: 10px;
  position: relative;
}

.group:before {
  display: block;
  content: '';
  position: absolute;
  z-index: -1;
  top: 10px;
  right: 20px; /* 20px instead of 10px due to padding */
  bottom: 10px;
  left: 10px;
  background: #666;
}

.node {
  width: 100px;
  height: 100px;
  float: left;
  background: #333;
  margin: 10px;
}

.foo {
  height: 20px;
  background: #00f;
  margin: 20px;
}
于 2013-08-16T13:50:24.353 回答
4

这有点 hacky，但是用一些策略性放置的伪元素隐藏顶部和左边距区域怎么样？ http://jsfiddle.net/SUJtd/

.foo {height:20px; background:#00f; margin:20px 20px 0;}

.group {overflow:hidden; margin:0 20px 20px 0; background:#666; position:relative;}
.group:before{content:""; position:absolute; top:0; left:0; right:0; height:20px; background:#fff;}
.group:after{content:""; position:absolute; top:0; bottom:0; left:0; width:20px; background:#fff;}

.node {width:100px; height:100px; float:left; background:#333; margin:20px 0 0 20px;}
于 2013-08-15T18:44:06.730 回答
2

没有额外的 HTML 标记- 但类更改和没有伪元素

一个可能适合您的简单技巧：http: //jsbin.com/owejal/65/edit

截屏：

在此处输入图像描述

将与所有可能数量的节点一起工作:)

<div class="foo"></div>
  <div class="group">
    <div class="node"></div>
    <div class="node"></div>
    <div class="node"></div>
    <div class="node"></div>
    <div class="node"></div>
    <div class="node"></div>
    <div class="node"></div>
  </div>
  <div class="foo2"></div>

CSS：

.group { overflow: hidden; margin: 20px; margin-bottom:0px; /* margin is required */ background: #666; }
.node { width: 100px; height: 100px; float: left; background: #333; margin: 0px 20px 20px 0px; /* there must 20px gap between every node, but not the container */ }
.foo { height: 20px; background: #00f; margin: 20px;}
.foo2{
  height:20px;
  background:#00f;
  border-top:20px solid white;
  margin:20px;
  margin-top:-20px;
}
于 2013-08-16T15:00:52.450 回答
1

将节点的边距更改为：

.node { margin: 0 20px 20px 0; }

请参阅http://jsbin.com/owejal/52/edit。请注意，这仍然会在底部为您提供额外的填充，但这是一个不容易解决的常见问题。有关解决此问题的各种方法，请参阅http://css-tricks.com/spacing-the-bottom-of-modules/（尽管在您介绍的情况下，这些解决方案都不起作用）。

于 2013-08-15T15:09:49.400 回答
1

由于您没有提到可调整性作为要求，您可以简单地使用第 n 个子声明，如下所示：

http://jsbin.com/owejal/51/

但是，此解决方案针对父容器的固定宽度进行了优化，因此例如，一行中应该始终有 4 个元素。然而，它只有 css。

于 2013-08-15T13:37:21.323 回答
-1

以下 CSS 将为您提供所需的结果，实际上您仍然有 2 个限制：

  1. 如果更改 body 的背景，则需要更新元素 .foo 的边框颜色
  2. 内部节点仍然有右边距，这也是您想要的结果屏幕截图的情况（.group 可以有 5 个节点，但在这个解决方案中它只有 4 个）。
.group {
    overflow: hidden;
    margin: 20px; /* margin is required */ 
    background: #666;  
}
.node {
    width: 100px;
    height: 100px;
    float: left;
    background: #333;
    margin: 0px 20px 20px 0px;
}
.foo { 
    height: 20px;
    background: #00f;
    margin: 20px; 
}
.group + .foo { 
    height: 20px;
    background: #00f;
    margin: 20px; 
    position: relative;
    top:-40px;
    border-top: 20px solid #fff;
}

您仍然可以在这里找到解决方案

于 2013-08-15T12:57:54.817 回答