/* inline-block — flows inline but respects sizing */
.inline-block-element {
  display: inline-block;
  width: 150px;       /* works */
  height: 40px;       /* works */
  margin: 10px;       /* all margins work */
  padding: 10px;      /* all padding works */
  /* Flows horizontally with siblings, but sizeable like a block */
}

/* Example */
<div class="inline-block-element">Item 1</div>
<div class="inline-block-element">Item 2</div>
<div class="inline-block-element">Item 3</div>

/* Renders as */
[Item 1] [Item 2] [Item 3]

/* All on one line, each 150px wide */

/* Buttons in a row */
.button {
  display: inline-block;
  padding: 10px 20px;
  margin: 5px;
  background: #0066cc;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  /* Buttons flow horizontally, each with sizing */
}

<button class="button">Cancel</button>
<button class="button">Save</button>
<button class="button">Delete</button>

/* Renders as */
[Cancel] [Save] [Delete]

/* Badges or tags */
.badge {
  display: inline-block;
  padding: 4px 8px;
  background: #f44336;
  color: white;
  border-radius: 12px;
  font-size: 12px;
  margin-right: 5px;
}

<span class="badge">New</span>
<span class="badge">Featured</span>

/* Renders as */
[New] [Featured]

/* Grid of boxes without CSS Grid */
.card {
  display: inline-block;
  width: 300px;
  margin: 10px;
  padding: 20px;
  background: white;
  border: 1px solid #cccccc;
  border-radius: 8px;
  vertical-align: top;
}

/* Cards flow horizontally, wrap to next line if needed */
/* vertical-align: top prevents baseline misalignment */

/* HTML whitespace becomes a space */
<div class="inline-block">Box 1</div>
<div class="inline-block">Box 2</div>

/* The newline/space between </div> and <div> becomes a space in layout */
[Box 1] [Box 2]

/* Extra space appears between boxes */

/* Solutions */

/* Solution 1: No whitespace in HTML */
<div class="inline-block">Box 1</div><div class="inline-block">Box 2</div>

/* Solution 2: Comment out whitespace */
<div class="inline-block">Box 1</div><!--
--><div class="inline-block">Box 2</div>

/* Solution 3: Negative margin to remove space */
.inline-block {
  display: inline-block;
  margin-right: -4px;  /* remove space character */
}

/* Solution 4: Use flexbox instead (modern, recommended) */
.container {
  display: flex;
  gap: 10px;  /* explicit spacing */
}

.item {
  display: block;
  flex: 1;
}

/* Baseline alignment (default) */
.inline-block {
  display: inline-block;
  /* aligns to baseline of surrounding text */
}

<span>Text</span>
<div class="inline-block">Box</div>

/* Box bottom aligns with text baseline */

/* Vertical alignment options */
.inline-block {
  display: inline-block;
  vertical-align: top;    /* align to top of line */
  vertical-align: middle; /* align to middle of line */
  vertical-align: bottom; /* align to bottom of line */
}

/* Example: icons aligned with text */
.icon-button {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  /* Icon now centers with adjacent text */
}

<button>
  <img src="icon.svg" alt="icon" class="icon-button">
  Button text
</button>

/* Icon and text align nicely */

/* Same layout with inline-block */
.container {
  width: 100%;
}

.item {
  display: inline-block;
  width: 30%;
  margin-right: 3%;
  vertical-align: top;
}

/* Same layout with flexbox (modern, cleaner) */
.container {
  display: flex;
  gap: 20px;
}

.item {
  flex: 1;
}

/* Flexbox is cleaner and more predictable */

/* Use inline-block for: */
/* - Components that need to flow inline and be sized */
/* - Simple layouts without complex alignment needs */

.pill-button {
  display: inline-block;
  padding: 8px 16px;
  margin: 2px;
  border-radius: 20px;
}

/* Use flexbox for: */
/* - Components that need automatic spacing/alignment */
/* - Flexible layouts that adapt to content */

.flex-navigation {
  display: flex;
  justify-content: space-between;  /* automatic distribution */
  align-items: center;              /* automatic vertical centering */
}

/* Use grid for: */
/* - Two-dimensional layouts */
/* - Complex grid structures */

.dashboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Modern recommendation: Use flexbox or grid instead of inline-block */
/* Inline-block is useful for backwards compatibility with older browsers */