• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

CSS Inline-block

← Previous Next →

🔹 What is display: inline-block in CSS?

The inline-block value of the display property allows an element to behave like both an inline element and a block element:

  • Like inline: It flows with text and does not break to a new line.

  • Like block: It allows setting width, height, padding, margin, etc.

🔸 Syntax

selector {
  display: inline-block;
}

🔸 Why Use inline-block?

It’s useful when you want:

  • Elements to appear side by side (like inline)

  • But still have control over their dimensions (like block)

🔸 Example: Two Boxes Side by Side

<div class="box">Box 1</div>
<div class="box">Box 2</div>

.box {
  display: inline-block;
  width: 150px;
  height: 100px;
  background: lightblue;
  margin-right: 10px;
}

🟢 Both boxes sit next to each other and allow width/height control.

🔸 Difference Between inline, block, and inline-block

Property inline block inline-block
Width/Height ❌ Not respected ✅ Yes ✅ Yes
Starts on new line ❌ No ✅ Yes ❌ No
Sits side by side ✅ Yes ❌ No ✅ Yes

🔸 Example: Image Buttons with Padding

<a class="btn" href="#">Button 1</a>
<a class="btn" href="#">Button 2</a>

.btn {
  display: inline-block;
  background: #28a745;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px;
}

🟢 inline-block allows custom padding and width like a block, but the elements stay inline.

🔸 Whitespace Issue in inline-block

When elements are defined on separate lines in HTML, they create extra space between them (due to spaces or line breaks).

🔹 Solution:

  • Remove whitespace between elements

  • Set font-size: 0 on the parent container

.parent {
  font-size: 0;
}
.child {
  display: inline-block;
  font-size: 16px;
}

🔸 Nested Inline-Block Layout Example

<div class="row">
  <div class="col">Column 1</div>
  <div class="col">Column 2</div>
  <div class="col">Column 3</div>
</div>

.col {
  display: inline-block;
  width: 30%;
  background: #f2f2f2;
  padding: 20px;
  margin-right: 2%;
}

🟢 This is a simple responsive column layout without using float or flex.

Practice Questions

Q1. Display two boxes side by side with padding.

Q2. Create image links that have a set width and height.

Q3. Build a horizontal button group with inline-block.

Q4. Style three cards to show next to each other.

Q5. Make a .menu-item span with fixed width but inline layout.

Q6. Remove whitespace between inline-block elements.

Q7. Set text links to have padding like a button using inline-block.

Q8. Use inline-block to layout an icon and text in one line.

Q9. Center multiple inline-block boxes inside a parent.

Q10. Build a header with left and right sections using inline-block.

← Previous Next →

CSS

online coding class codepractice

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

codepractice logo
Login
Go Back Top