CSS填充重疊的父元素

我的HTML：CSS填充重疊的父元素

<table style="width:100%;"> 
    <tbody> 
     <tr style="cursor:pointer; border-bottom:1px solid #ACACAC; height:60px;"> 
      <td style="text-align:right; vertical-align:middle; padding:10px 10px 10px 0px;"> 
       <span style="color:#F87E20;">Copy</span> 
       <div style="display:inline; color:#ACACAC;">&nbsp;|&nbsp;</div> 
       <span style="color:#F87E20;">Export</span> 
       <div style="display:inline; color:#ACACAC;">&nbsp;|&nbsp;</div> 
       <span style="color:#F87E20;">Delete</span> 
      </td> 
     </tr> 
    </tbody> 
</table>

結果：

這是所有罰款，並正在奇妙。不過，我想進行一些QOL更改，並且在考慮我想要做的一些更改的同時，碰到一些讓我感到困惑的東西。

整行是可點擊的，以及Copy,Export和Delete跨度。當我嘗試點擊Export，但錯過了2或3個像素，並從此區域移開時，這會成爲問題。我想讓可點擊區域的跨度更大，所以我給了一個樣式屬性，如下所示：padding:10px 0px 10px 0px;

填充按預期工作，擴大了跨度範圍內的可點擊區域，使其更易於點擊它們。但是，我期待填充也可以使整行更高，但相反，它就好像跨越的填充只是在父項填充上方流動。

這裏有一些圖像，以幫助說明情況：家長：

與子女：

我不明白，爲什麼孩子的填充流動之外它的容器，我不想在不瞭解發生什麼的情況下朝這個方向繼續前進。我想知道是否有人可以幫我理解這裏發生了什麼？

來源

2015-10-20 Skytiger

''''''''''''''''''''''''''''''''''''''使'div'像'span'一樣工作。 – Henrik

分享您的css代碼 –

@ArunKumarM通過外部文件中的類應用於這些元素的所有CSS已被應用爲問題代碼片段中的樣式，除此之外，沒有其他樣式/類影響除標準HTML之外的那些元素各個元素。 – Skytiger

您的span s是內聯元素。內聯元素的頂部和底部填充被忽略。默認情況下，span s是內聯的，而div是塊。但是，您始終可以用display: block;或display: inline;來覆蓋這些值。塊元素（也是行內塊）具有全面的填充支持。見：

table { 
 
    width: 100%; 
 
    border-bottom: 1px solid #ACACAC; 
 
} 
 

 
tr { 
 
    cursor: pointer; 
 
    height: 60px; 
 
} 
 

 
td { 
 
    text-align: right; 
 
    vertical-align: middle; 
 
    padding: 10px 10px 10px 0px; 
 
    background-color: #e0c000; 
 
} 
 

 
span { 
 
    display: inline-block; 
 
    color: #F87E20; 
 
    background-color: #f0e000; 
 
} 
 

 
.padded { 
 
    padding: 10px 0 10px; 
 
} 
 

 
div { 
 
    display: inline; 
 
    color: #ACACAC; 
 
}

<table> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <span>Copy</span> 
 
     <div>&nbsp;|&nbsp;</div> 
 
     <span class="padded">Export</span> 
 
     <div>&nbsp;|&nbsp;</div> 
 
     <span>Delete</span> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

也this article中查看這一點。

來源

2017-12-05 15:31:28

CSS填充重疊的父元素

回答

相關問題