【问题标题】:Why is a div with "display: table-cell;" not affected by margin?为什么 div 带有“display: table-cell;”不受保证金影响?
【发布时间】:2021-10-16 02:16:36
【问题描述】:

我有div 元素与display: table-cell; 相邻。

我想在它们之间设置margin,但是margin: 5px没有效果。为什么?

我的代码:

<div style="display: table-cell; margin: 5px; background-color: red;">1</div>
<div style="display: table-cell; margin: 5px; background-color: green;">1</div>

【问题讨论】:

    标签: html css


    【解决方案1】:

    原因

    来自the MDN documentation

    [边距属性]适用于所有元素,除了带有 table-caption、table 和 inline-table 以外的表格显示类型

    换句话说,margin 属性适用于display:table-cell 元素。

    解决方案

    考虑改用border-spacing 属性。

    请注意,它应该应用于具有display:table 布局和border-collapse:separate 的父元素。

    例如:

    HTML

    <div class="table">
        <div class="row">
            <div class="cell">123</div>
            <div class="cell">456</div>
            <div class="cell">879</div>
        </div>
    </div>
    

    CSS

    .table {display:table;border-collapse:separate;border-spacing:5px;}
    .row {display:table-row;}
    .cell {display:table-cell;padding:5px;border:1px solid black;}
    

    jsFiddle demo


    水平和垂直边距不同

    正如 Diego Quirós 所述,border-spacing 属性还接受两个值来为水平轴和垂直轴设置不同的边距。

    例如

    .table {/*...*/border-spacing:3px 5px;} /* 3px horizontally, 5px vertically */
    

    【讨论】:

    • 谢谢!如果水平和垂直空间需要不同的边框间距,也有这种表示法:水平垂直;
    • 我以为我发现了一个错误;原来我需要学习更多的 CSS。
    • 我猜这并不能真正处理特定的左/右/上/下边距?并且没有办法让特定的表格单元格具有与其他单元格不同的填充?
    • @Nathan padding 可以像往常一样为任何必要的选择器(例如类或 id)设置。如果您的意思是单元格之间的margin,那么可以通过将两个值设置为border-spacing 来分别设置垂直轴和水平轴,但它将应用于整个表格而不是单个单元格。
    【解决方案2】:

    您可以使用内部 div 设置边距。

    <div style="display: table-cell;">
       <div style="margin:5px;background-color: red;">1</div>
    </div>
    <div style="display: table-cell; ">
      <div style="margin:5px;background-color: green;">1</div>
    </div>
    

    JS Fiddle

    【讨论】:

    • 如果您想要单元格之间的边距而不是它们的左侧或右侧,这是一个好主意。那么你的 CSS 可能类似于.inner-div { margin-right: 5px; } .outer-cell:last-child .inner-div { margin-right: 0; }。但也要注意这个问题:这个例子的红色和绿色背景在高度上不一定匹配,因为它们不在单元格上。
    【解决方案3】:

    表格单元格不考虑边距,但您可以改用透明边框:

    div {
      display: table-cell;
      border: 5px solid transparent;
    }
    

    注意:这里不能使用百分比... :(

    【讨论】:

      【解决方案4】:

      如果你有这样的 div 彼此相邻

      <div id="1" style="float:left; margin-right:5px">
      
      </div>
      <div id="2" style="float:left">
      
      </div>
      

      这应该可行!

      【讨论】:

      • 好的,但是如果他想要两个高度相等的 div 怎么办? Float 无法做到这一点。
      • 这就是为什么JS 很棒:)
      • @ChrisHappy 当有 CSS 解决方案时,永远不要使用 JavaScript。您的代码变得庞大。
      • @ssc-hrep3 随着响应能力的出现,笨重的 CSS 解决方案已经不够用了……
      • 它们就足够了——尤其是响应式需求。只需看看flexbox,它现在由most of the major browsers 支持,并且很容易解决这个确切的问题。布局样式不应该由 JavaScript 完成。
      【解决方案5】:

      我也在寻找如何使用display: table-cell;(以便使高度相等)以及left-margin。没有建议的解决方案对我有用。所以我来到了我的转储解决方法 - 我只是添加了一个带有display: table-cell; 的跨度,宽度为所需的边距大小。不优雅,但很有效。

      【讨论】:

        猜你喜欢
        • 2013-07-18
        • 1970-01-01
        • 2016-05-21
        • 2012-05-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2011-02-24
        相关资源
        最近更新 更多