• Hajipur, Bihar, 844101

☰
❮
❯

CSS

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)

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.

CSS Inline-block Quiz

Q1: What is the main benefit of inline-block over inline?

A. Allows margin only
B. Allows width and height
C. Changes font
D. Makes it float

Q2: Which of these is true about inline-block?

A. Always starts a new line
B. Respects width and stays inline
C. Does not allow background color
D. Only works on images

Q3: Which elements can be aligned side by side using inline-block?

A. Only <span>
B. Any with display: inline-block
C. Only <div>
D. Only text elements

Q4: Which of the following causes space between inline-block elements?

A. CSS margin
B. HTML whitespace
C. Float
D. Padding

Q5: What is the default display value for <span>?

A. block
B. inline
C. inline-block
D. none

Q6: How can we remove the space between inline-block elements?

A. Use float
B. Set font-size: 0 on parent
C. Add margin
D. Use position: absolute

Q7: Which property is required to make links behave like buttons?

A. padding
B. border-radius
C. display: inline-block
D. text-decoration

Q8: What happens if you set width on inline elements?

A. Nothing happens
B. Width is ignored
C. Width works normally
D. Content disappears

Q9: What is the difference between inline-block and block?

A. inline-block can’t float
B. inline-block doesn’t start on a new line
C. block allows height
D. Both are the same

Q10: Which of the following layouts can be achieved using inline-block?

A. Grid
B. Horizontal cards
C. Vertical navbar only
D. Absolute positioning
← Previous Next →
Login
Go Back Top