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

Python Kivy ListView: How to delete selected ListItemButton? -

asp.net mvc 4 - A specified Include path is not valid. The EntityType '' does not declare a navigation property with the name '' -