html - adding img in paragraph is causing all its adjacent div slightly moved downward -

i have set of div on webpage following html , css.

    <style type="text/css">         .div-set {             margin: 5px 2px;         }             .div-set > .widget:nth-child(3n-1) {                 margin: 20px 32px;             }          .widget {             width: 300px;             height: 300px;             border: 2px solid #dbdbdb;             padding: 0px;             position: relative;             display:inline-block;         }             .widget h2 {                 color: white;                 text-align: center;                 margin: 0;                 padding: 2px 5px;                 font-weight: bold;                 margin: 2px;                 border-top-left-radius: 8px;                 border-top-right-radius: 8px;             }             .widget p {                 padding: 3px 10px;                 padding-bottom: 15px;             }             .widget > {                 position:absolute;                 bottom:0px;                 right:0px;                 text-decoration:none;                 background:#dbdbdb;                 color:black;                 padding:2px;                 border-bottom-right-radius:5px;             }     </style>      <div class="div-set">         <div class="widget">             <h2>founder</h2>             <p>                 <b>late shri brahmdutta sharma</b> has founded                 goshala in 1999 providing shelter 3 cows , number of cows becomes thirty in first 2 months.             </p>             <a href="#">learn more</a>         </div>         <div class="widget">             <h2>founder</h2>             <p>                 <b>late shri brahmdutta sharma</b> has founded                 goshala in 1999 providing shelter 3 cows , number of cows becomes thirty in first 2 months.             </p>             <a href="#">learn more</a>         </div>         <div class="widget">             <h2>founder</h2>             <p>                 <b>late shri brahmdutta sharma</b> has founded                 goshala in 1999 providing shelter 3 cows , number of cows becomes thirty in first 2 months.             </p>             <a href="#">learn more</a>         </div>         <div class="widget">             <h2>founder</h2>             <p>                 <b>late shri brahmdutta sharma</b> has founded                 goshala in 1999 providing shelter 3 cows , number of cows becomes thirty in first 2 months.             </p>             <a href="#">learn more</a>         </div>         <div class="widget">             <h2>founder</h2>             <p>                 <b>late shri brahmdutta sharma</b> has founded                 goshala in 1999 providing shelter 3 cows , number of cows becomes thirty in first 2 months.             </p>             <a href="#">learn more</a>         </div>         <div class="widget">             <h2>founder</h2>             <p>                 <img runat="server" src="~/css/slide/btns-next-prev.png" style="height:50px; width:100px;" alt="alternate text" />                 <b>late shri brahmdutta sharma</b> has founded                 goshala in 1999 providing shelter 3 cows , number of cows becomes thirty in first 2 months.             </p>             <a href="#">learn more</a>         </div>     </div> 

i have added image using img tag in last div can see on webpage adjacent divs have moved bottom in image below:

changing display property inline-table working in firefox not in chrome. have tried removing float property image no luck.

what thing causing unexpected behavior..?? how can fix that..?

please note: if add image in of 3 div (.widget) in line (a line has 3 divs) there no such issue found. add image in 2 of div in line remaining 1 move bottom.

here page

what causing layout break?

consider simplified html based on original post:

<div class="widget-panel ex1">     <div class="widget">         <p>some text on line can wrap around second line.</p>     </div>     <div class="widget">         <p>same text.</p>     </div>     <div class="widget">         <p>sane text.</p>     </div>     <div class="widget">         <p><img src="http://placehold.it/100x50"> image , sun text.</p>     </div> </div> 

basically, container div.widget-panel , 4 child elements div.widget.

the css follows:

.widget-panel {     border: 1px dotted blue;     width: 410px; } .widget {     display: inline-block;     border: 1px dashed gray;     width: 200px;     height: 100px; } .widget p {     outline: 1px dotted red; } 

and 2 additional rules demonstration purposes:

.ex1 .widget {     vertical-align: baseline;     } .ex2 .widget {     vertical-align: top;     } 

and fiddle: http://jsfiddle.net/audetwebdesign/nswgw/

what happening here inline blocks being formatted single inline box wrapping onto second line because of width constraint of parent element (410px).

within parent container, text elements within inline-blocks vertically positioned on baseline such bottom lines of each paragraph fall on same (imaginary) horizontal line.

when add inline image, increase height of inline box causes inline-block move upward since browser aligning bottom lines on same baseline.

in example 2, vertical-align: top used, , tells browser align text elements along top edge of inline box. result, top lines of text paragraphs aligned. however, top line aligned top of inline image, correct, may not want. fix using float.

all of correct css compliant behavior formatting inline elements.