inline-block-baseline.html (754B)
1 <!DOCTYPE html> 2 <html><head> 3 <style> 4 .inline-block { display: inline-block; } 5 .test { 6 background-color: lightgrey; 7 overflow: hidden; 8 } 9 .border { border: solid blue; border-width: 1px 3px 5px 7px; } 10 .padding { padding: 10px; } 11 .margin { margin: 1px 3px 5px 7px; } 12 </style> 13 14 </head><body> 15 16 The boxes should align vertically: 17 <div class="inline-block"> 18 <div> 19 <div class="test border padding margin overflow"></div> 20 </div> 21 </div> 22 23 <div class="test inline-block margin border padding overflow"></div> 24 25 <br> 26 27 The boxes should align vertically: 28 <div class="inline-block"> 29 <div> 30 <div class="test border padding margin overflow">X</div> 31 </div> 32 </div> 33 34 <div class="test inline-block margin border padding overflow">X</div> 35 36 </body></html>