CSS Inline Block

  Inline-block combines **inline** and **block** behavior.
  
  ## Problem it solves
  - inline elements ignore width/height
  - block elements go to new line
  
  Inline-block gives both benefits.
  
  ## Example
  ```css
  .box {
    display: inline-block;
    width: 120px;
    height: 120px;
  }
  ```
  
  ## UI Visualization
  - Boxes appear side by side
  - Each box has fixed size
  
  ## Real-world example
  - Buttons in a row
  - Simple cards
  - Menu items
  
  ## When to use
  When you want control + side-by-side layout