首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >CSS表格布局:为什么表格行不接受边距?

CSS表格布局:为什么表格行不接受边距?
EN

Stack Overflow用户
提问于 2010-01-03 07:30:03
回答 7查看 118.5K关注 0票数 105

.container {
  width: 850px;
  padding: 0;
  display: table;
  margin-left: auto;
  margin-right: auto;
}
.row {
  display: table-row;
  margin-bottom: 30px;
  /* HERE */
}
.home_1 {
  width: 64px;
  height: 64px;
  padding-right: 20px;
  margin-right: 10px;
  display: table-cell;
}
.home_2 {
  width: 350px;
  height: 64px;
  padding: 0px;
  vertical-align: middle;
  font-size: 150%;
  display: table-cell;
}
.home_3 {
  width: 64px;
  height: 64px;
  padding-right: 20px;
  margin-right: 10px;
  display: table-cell;
}
.home_4 {
  width: 350px;
  height: 64px;
  padding: 0px;
  vertical-align: middle;
  font-size: 150%;
  display: table-cell;
}
<div class="container">
  <div class="row">
    <div class="home_1"></div>
    <div class="home_2"></div>
    <div class="home_3"></div>
    <div class="home_4"></div>
  </div>

  <div class="row">
    <div class="home_1"></div>
    <div class="home_2"></div>
  </div>
</div>

我的问题是关于CSS中标记为HERE的行。我发现这些行太近了,所以我尝试添加一个底部页边距来分隔它们。不幸的是,它不起作用。我必须在表格单元格中添加边距以分隔行。

这种行为背后的原因是什么?

另外,是否可以像我这样使用此策略来执行布局:

[icon] - text      [icon] - text
[icon] - text      [icon] - text

还是有更好的策略?

EN

回答 7

Stack Overflow用户

回答已采纳

发布于 2010-01-03 07:42:04

请参阅CSS 2.1标准,第17.5.3节。使用display:table-row时,DIV的高度完全由其中的table-cell元素的高度决定。因此,这些元素上的边距、填充和高度都没有影响。

http://www.w3.org/TR/CSS2/tables.html

票数 86
EN

Stack Overflow用户

发布于 2010-02-01 05:47:00

我见过的最接近的方法是将border-spacing: 0 30px;设置为容器div。然而,这只会在表的上边缘留下空间,这就违背了目的,因为您想要的是保证金-底部。

票数 18
EN

Stack Overflow用户

发布于 2010-01-03 07:36:56

你有没有试过把底边距设为.row div,也就是你的“单元格”?在处理实际的HTML表格时,也不能为行设置边距-只能为单元格设置边距。

票数 6
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/1993277

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档