Question

鉴于此HTML和CSS代码：

＆＃13;

header,
footer {
  text-align: center;
  background: #fafafa;
  padding: 20px 0;
}

.wrapper {
  display: table;
  width: 1024px;
  background: blue;
  margin: 0px auto;
}

section {
  width: 50%;
  display: table-cell;
  background: #e5e5e5;
  /* This line is the root of the problem */
  padding: 20px;
}

aside {
  width: 50%;
  display: table-cell;
  background: #c5c5c5;
}

＆＃13;

<header>header</header>
<div id="main">
  <div class="wrapper">
    <section>left<br />left<br />left<br />left<br />left<br /></section>
    <aside>right<br />right<br />right<br />right<br />right<br /></aside>
  </div>
</div>
<footer>footer</footer>

＆＃13;

我在section元素（左侧元素）上添加填充时遇到问题。它还在aside元素（右侧元素）上添加了一些填充顶部，这是我不想要的。

这是一个没有填充的屏幕截图：

这是左侧元素填充的截图：

有关如何摆脱右侧元素上自动添加的填充的任何线索？

提前致谢

Answer 1

padding: 20px会导致问题发生这意味着您可以为顶部，左侧，右侧和底部设置填充在表格中，行中的每个单元格将具有相同的样式
所以，要解决这个问题，试试这个

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>PoC</title>
    <!-- Reset CSS by E. Meyer -->
    <link rel="stylesheet" href="public/css/reset.css" />
    <style type="text/css">
     header, footer { text-align: center; background: #fafafa; padding: 20px 0; }

     .wrapper { display: table; width: 1024px; background: blue; margin: 0px auto; }
     table > tr > td:first {
         padding-top: 20px;
     }
     section {
         width: 50%;
         display: table-cell;
         background: #e5e5e5;

         /* This line is the root of the problem */
         //padding-top: 20px;
     }

     aside {
         width: 50%;
         display: table-cell;
         background: #c5c5c5;
     }
    </style>
</head>
<body>
    <header>header</header>

    <div id="main">
        <div class="wrapper">
            <section>left<br />left<br />left<br />left<br />left<br /></section>
            <aside>right<br />right<br />right<br />right<br />right<br /></aside>
        </div>
    </div>

    <footer>footer</footer>
</body>

希望这有帮助。

Answer 2

问题在于display: table-cell中的aside与section对齐。

这意味着display: table-cell元素将占用与其前一个相同的填充，在这种情况下是section元素。

删除display: table-cell并添加display: inline-block，并将vertical-align: top提供给section，导致归因于vertical-align元素的默认display: inline-block属性是bottom。

请尝试以下代码：

header,
footer {
  text-align: center;
  background: #fafafa;
  padding: 20px 0;
}

.wrapper {
  display: table;
  width: 1024px;
  background: blue;
  margin: 0px auto;
}

section {
  width: 50%;
  display: table-cell;
  background: #e5e5e5;
  padding: 20px;
  vertical-align: top;
}

aside {
  width: 50%;
  display: inline-block;
  background: #c5c5c5;
}

<header>
  header</header>

<div id="main">
  <div class="wrapper">
    <section>left
      <br />left
      <br />left
      <br />left
      <br />left
      <br />
    </section>
    <aside>right
      <br />right
      <br />right
      <br />right
      <br />right
      <br />
    </aside>
  </div>
</div>

CSS表格单元格填充搞乱

2 个答案: