鉴于此 HTML 和 CSS 代码:
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;
}<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>在 section 元素(左侧元素)上添加填充时出现问题。
它还在 aside 元素(正确的元素)上添加了一些 padding-top，这是我不想要的。
这是一个没有填充的截图:
这是左侧元素填充的屏幕截图:
关于如何摆脱右侧元素上自动添加的填充的任何线索？
提前致谢
最佳答案
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>
希望对您有所帮助。
关于html - CSS 表格单元格填充困惑，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42829898/