如何使用 CSS 折叠一组 <div> 标签的边框？答案

【问题标题】：How to collapse the borders of a set of <div> tags using CSS?如何使用 CSS 折叠一组 <div> 标签的边框？
【发布时间】：2012-04-18 21:49:43
【问题描述】：

我有一个由 DIV 组成的网格，宽度固定，边框为 1 像素。现在两个 DIV 相互接触，边框显然变成了 2px。

我怎样才能在整个网格中获得一个 1px 的边框？

这就是我的意思：

http://jsfiddle.net/Before/4uPtj/

HTML：

<div class="gridcontainer">
  <div class="griditem"></div>
  <!-- 15 more times -->
</div>

CSS：

div.gridcontainer
{
  width: 80px;
  line-height: 0;
}

div.griditem
{
  display: inline-block;            
  border: 1px solid black;
  width: 18px;
  height: 18px;
}

【问题讨论】：

我确实考虑过使用table，但我选择了DIV，因为网格确实不适用于表格数据。无论如何，每个正方形都应保持正方形，并且行不应因溢出内容而被拉伸。
对于 CSS 网格布局解决方案，请参见此处：stackoverflow.com/q/47882924/3597276

标签： html css

【解决方案1】：

试试这个：

div.griditem
{
    display: inline-block;            
    border: 1px solid black;
    width: 18px;
    height: 18px;
    margin-left: -1px;
    margin-bottom: -1px;
}

【讨论】：

【解决方案2】：

您好，您根据您的 griditem div 定义您的 gridcontainer

像这样

css

   div.gridcontainer
    {
        width: 76px;
        line-height: 0;
        border: solid black;
        border-width: 0 1px 1px 0;
    }

    div.griditem
    {
        display:inline-block;           
        border: solid black;
        border-width: 1px 0 0 1px;
        width: 18px;
        height: 18px;
    }

HTML

<div class="gridcontainer">
    <div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div><div class="griditem"></div>
</div>

现场演示http://jsfiddle.net/rohitazad/4uPtj/1/

【讨论】：

+1 比接受的答案好，因为它不使用负边距，这在旧浏览器中会产生不可预测的结果。
为什么是line-height: 0？

【解决方案3】：

因为标题可能很多人最终会在这里寻找像我这样的实际css网格布局问题的解决方案。对于他们来说，这里有一个使用grid-gap 和box-shadow 组合的解决方法

.bar {
    max-width: 200px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 1px;
}
.foo {
  box-shadow: 0 0 0 1px #000;
}

<div class="bar">
    <div class="foo">1</div>
    <div class="foo">2</div>
    <div class="foo">3</div>
    <div class="foo">4</div>
    <div class="foo">5</div>
    <div class="foo">6</div>
    <div class="foo">7</div>
    <div class="foo">8</div>
    <div class="foo">9</div>
</div>

【讨论】：

有趣！当我在 2012 年问这个问题时，我认为“显示：网格”不存在。我认为这是一个更现代的解决方案。

【解决方案4】：

边框折叠属性有帮助吗？

border-collapse 属性设置表格边框是折叠成单个边框还是像标准 HTML 中那样分离。

见：http://www.w3schools.com/cssref/pr_border-collapse.asp

table#myTable
{
   border-collapse:collapse;
}

【讨论】：

这是最干净的方法，并且在一行 CSS 中。我将接受的答案从 Tobi's 更改为这个。
这是错误的，这在网格上不起作用（扩展边框以查看这不起作用）请参阅：mdn border-collapse 它仅适用于<table> 请参阅w3 border-collapse definition元素。
border-collapse 仅适用于基于表格的元素，因此不是针对特定于块级别的实际问题的答案。

【解决方案5】：

我用过CCS Grid Layout（显示：网格）

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*:before, *:after {
  box-sizing: border-box;
}

container {
  width: 100%;
  height: 100%;
}

img {
  max-width: 100%;
  display: block;
}

.grid {
	display: grid;
	background-color: #000;
	border: 1px solid #000;
	grid-gap: 1px;
	justify-self: center; 
	max-width: 282px;
	height: auto;
	margin: 0 auto;
}

.box {
  position: relative;
}

.cell::before {
  content: "";
  position: absolute;
  display: block;
  border: 10px solid #fff;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

.box:hover::after {
  content: "+";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  color: white;
  font-size: 60px;
  font-weight: bold;
}


.box:hover .cell::after {
  content: "";
  display: block;
  position: absolute;
  border: 1px solid red;
  left: -1px;
  right: -1px;
  bottom: -1px;
  top: -1px;
}

.cell {
  position: relative;
  pointer-events: none;
}

.box:hover {
  background-color: red;
}

.box:hover .cell::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(255,0,0,0.5);
}

@media only screen and (min-width: 768px) {
	.grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(4, 1fr);
		max-width: 563px;
	}
}

@media only screen and (min-width: 1024px) {
	
	.grid {
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(2, 1fr);
		max-width: 1124px;
	}
}

<div class="container">
  <div class="grid">
    <div class="box">
      <div class="cell"><img src="http://placehold.it/270x270"></div>
    </div>
    <div class="box">
      <div class="cell"><img src="http://placehold.it/270x270"></div>
    </div>
    <div class="box">
      <div class="cell"><img src="http://placehold.it/270x270"></div>
    </div>
    <div class="box">
      <div class="cell"><img src="http://placehold.it/270x270"></div>
    </div>
    <div class="box">
      <div class="cell"><img src="http://placehold.it/270x270"></div>
    </div>
    <div class="box">
      <div class="cell"><img src="http://placehold.it/270x270"></div>
    </div>
    <div class="box">
      <div class="cell"><img src="http://placehold.it/270x270"></div>
    </div>
    <div class="box">
      <div class="cell"><img src="http://placehold.it/270x270"></div>
    </div>
  </div>
</div>

【讨论】：

【解决方案6】：

<style>

.gridcontainer .griditem
    {
        border : 2px solid rgba(204,204,204,0.8) !important;
        margin-left:-1px; 
        margin-right:-1px;
        margin-top: -1px;
        margin-bottom: -1px;
    }
</style>

【讨论】：

你能告诉我这和托比的答案有什么区别吗？我没看到。

【解决方案7】：

这是另一种没有负边距的方法：http://jsfiddle.net/e5crg405/

div.gridcontainer {
    width: 80px;
    line-height: 0;
}

div.griditem {
    display: inline-block;            
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    width: 18px;
    height: 18px;
}

div.griditem:nth-child(4n + 1) {
    border-left: 1px solid black;
}

div.griditem:nth-child(-n + 4) {
    border-top: 1px solid black;
}

【讨论】：

对于非响应式布局非常有用:)