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
Post a Comment