html - Why is child elements margin being applied to other cells? -


i have strange problem. child elements in table cell margin , affecting every other cell. it's hard explain, check out jsfiddle: https://jsfiddle.net/5s9nab3h/

<style>     .table {         display: table;         width: 100%;     }     .table > .cell {         display: table-cell;         border: 1px solid #f00;     }     .tallmargin {         padding-top: 100px;     } </style>  <div class="table">     <div class="cell">         cell has no margin or padding.     </div>     <div class="cell">         <p class="tallmargin">this content has 100px margin on top.</p>     </div> </div> 

edit: problem in .table > .cell needed have vertical-align: top since defaults middle.

display: table-cell setting height of each column equal size. might want read tutorial on table-cell

consistent height columns

by adding display: table-cell property columns expand match height of largest column in row. height defined content , not explicit fixed height.


Comments

Popular posts from this blog

python - TypeError: start must be a integer -

c# - DevExpress RepositoryItemComboBox BackColor property ignored -

django - Creating multiple model instances in DRF3 -