css - html and svg sizing issue -


i have following html structure:

html

<div class="row">     <div class="cell">1234</div>     <div class="cell">5678</div> </div>  <div class="row">     <div class="cell">1234</div>     <div class="cell"><div><svg width="100%" height="100%"></svg></div></div> </div> 

css

.row {     display: table-row;     background-color: #dadada; }  .cell {     display: table-cell;     width: 50px;     height: 25px; } 

fiddle

can tell me why row svg cell higher 25px?

note

the svg rendered library, can't set height.

well, clarified issue both codes of yours, since svg inline element default, need use vertical-align: top; inorder rid of height disturbance..

svg {     vertical-align: top; } 

demo

it better if assign id svg element , modify selector accordingly.


Comments

Popular posts from this blog

php - Submit Form Data without Reloading page -

linux - Rails running on virtual machine in Windows -

php - $params->set Array between square bracket -