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表單元格邊距弄亂

回答

相關問題