image changes layout in another div?

[eiranix]

Sorry if this is a stupid question, but why does the image in the third div affect the layout of the text in the first div?

.table {    display:table;}.cell {    width:100px;    display:table-cell;    background-color:lightblue;}.gutter {    display:table-cell;    min-width:20px;}

<div class="table">  <div class="cell">    Some Text  </div>  <div class="gutter"></div>  <div class="cell">    <img src="http://a.deviantart.net/avatars/a/p/aperture-a.png">  </div></div>

[dsonesuk]

In what way? if you use the same class in both, you will get the same design to that class declaration in both.

[eiranix]

The first .cell has text. The image in the second .cell makes the text in the first move down...

[dsonesuk]

Maybe due that when image and text are used in table cell the text defaults to baseline alignment (bottom of img), fix is to use vertical-align: top; or vertical-align: middle;

[eiranix]

Yes thank you that works... I didn't think alignment could work that strangely, so I didn't try that!

 

I don't think it makes any sense, but it works!