CODEWITHSUNDEEP
htmlcsssvg
Levi
Levi

Reputation: 657

html and svg sizing issue

I have the 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 you tell me why the row with svg cell is higher then 25px?

NOTE

The svg is rendered by a library, so I can't set its height.

Upvotes: 1

Views: 75

Answers (2)

Robert Longson
Robert Longson

Reputation: 124249

You've two issues.

  1. SVG is an inline element as stated in the other answer, this can be solved by giving the svg a vertical-align: top style.

  2. The <svg> is in an inner <div> element that has no width/height style. The <div> will size to its contents but the contents are an svg element that sizes to its container. The result should be that the cell sizes to the fallback 300 x 150 width/height which it does in Firefox.

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157414

Well, you clarified that the issue is with both codes of yours, so since svg is an inline element by default, you need to use vertical-align: top; inorder to get rid of the height disturbance..

svg {
    vertical-align: top;
}

Demo

It will be better if you assign an id to your svg element and modify your selector accordingly.

Upvotes: 1

Related Questions