大佬教程收集整理的这篇文章主要介绍了css – 在元素之间创建带边距但不包含容器的元素容器?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
例如,http://jsbin.com/owejal/3/edit或图片:
但是,预期的结果是:
>容量为20px的容器,
>中间有20px边距的儿童,但不包括容器.
这可以使用负填充(即,如果容器具有填充:-20px 0 0 -20pX)来实现,尽管这种情况不存在.
使用附加元素(http://jsbin.com/owejal/4/)可以实现所需的结果,但我很想知道是否只有CSS解决方案.
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; }
以上是大佬教程为你收集整理的css – 在元素之间创建带边距但不包含容器的元素容器?全部内容,希望文章能够帮你解决css – 在元素之间创建带边距但不包含容器的元素容器?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。