inline-block and baseline

by Jon Sanders

HTML

<div id="container">The characters 'ygpdfk' have descenders which descend below the baseline.
    <div id="firstDiv">FIRST<br>My baseline<br>is aligned<br>with the baseline<br>of the container div</div>   
    <div id="thirdDiv">THIRD
    <br>I'm the third div.<br>I have the lowest<br> baseline<br>of all the inline blocks<br> in this line
    <br>so my baseline
    <br> sets the baseline
    <br> of the container div.
    <br> But if my baseline
    <br> sets the baseline
    <br> of the container,
    <br> why is my
    <br> baseline
    <br> slightly above
    <br> the baseline
    <br> of the container?
    <br> That's because
    <br> the overflow property
    <br> is set to 'hidden'.
    <br> This means that
    <br> my <strong>margin</strong> is aligned
    <br> with the baseline
    <br> of the container,
    <br> not my <strong>baseline</strong>.
    </div>
</div>

CSS

body{
    margin: 0px auto;
}
#container {
  height: 1000px;
    border: 15px solid orange;   
}
#firstDiv{
    border: 1px solid brown;     
    display:inline-block;
    width: 70px;      
  
}
#thirdDiv{
    display:inline-block;
    border: 10px solid yellowgreen;  
    overflow:hidden;
    position:relative;            
}