CSS表单元格边距弄乱

鉴于这种HTML和CSS代码：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元素（正确元素）上添加了一些填充顶部，我不想要这些元素。

这里是没有填充的截图：

这里与左元素的填充截图：

如何摆脱任何线索在右边的元素上自动添加填充？

在此先感谢

来源

2017-03-16 SmartyLisp

的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>

希望得到这个帮助。

来源

2017-03-16 09:29:08 Kramer

其实，我只是想左元素得到填充。不是正确的。 – SmartyLisp

如果“在表格中，行中的每个单元格都具有相同的样式”，为什么右侧元素在其内容的左侧没有填充？像其他细胞一样，事实上呢？ – SmartyLisp

请参阅编辑答案，我的意思是“同样的风格”在这里是相同的高度。 – Kramer

问题出在您的aside中的display: table-cell，它与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>

来源

2017-03-16 09:34:19 nashcheez

CSS表单元格边距弄乱

回答

相关问题