How is the padding of display:table-cell determined

Question

I\'m trying to come out with a table-like layout, with medicine names appearing on the left and the data occupy the rest of the table. Simply put:

Answer 1

This is about vertical alignment. The default one is set to baseline and produce this output. Simply change the alignment to top on the table-cell and you won't have this issue:

  

    

      

        Dexedrine Spansules (Dextroamphetamine, ER) 
(20mg)
      
      

        Methamphetamine (Desoxyn, IR) 
(15mg)
      
    
    

      

        

          

            

              

                Morning
-
              
              

                Noon
5mg
              
            
            

              

                Afternoon
12mg
              
              

                Evening
-
              
            
          
        
        

          

            

              

                Morning
-
              
              

                Noon
5mg
              
            
            

              

                Afternoon
12mg
              
              

                Evening
-
              
            
          
        
      
    
  

Since your code is a bit complex, here is a basic one to reproduce the issue and better understand what's happening:

.table {
  display: table;
  border: 1px solid;
  margin: 5px;
}

.table>div {
  display: table-row;
}

.table>div>span {
  display: table-cell;
  padding: 0 5px;
}

.table>div>span span {
  display: inline-block;
}

baseline

  

    one line
    two 
 line (inline-block)
  

baseline

  

    two
 line
    two 
 line (inline-block)
  

baseline (with overflow:hidden)

  

    one line
    two 
 line
  

baseline (with overflow:hidden)

  

    one line
    another line
  

top will fix all the cases

  

    one line
    two 
 line
  


  

    one line
    two 
 line
  


  

    one line
    another line
  


  

    two
 line
    two 
 line (inline-block)
  

You can clearly see how the use of inline-block (and overflow:hidden) is the culprit here as it make the calculation of the baseline counter intuitive and unexpected.