Class 6 Exam  >  Class 6 Notes  >  CSS for Beginners  >  CSS Inline-Block

CSS Inline-Block | CSS for Beginners - Class 6 PDF Download

The display: inline-block Value


Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.
Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.
Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.
The following example shows the different behavior of display: inline, display: inline-block and display: block:
Example

span.a {

  display: inline; /* the default for span */

  width: 100px;

  height: 100px;

  padding: 5px;

  border: 1px solid blue;

  background-color: yellow;

}


span.b {

  display: inline-block;

  width: 100px;

  height: 100px;

  padding: 5px;

  border: 1px solid blue;

  background-color: yellow;

}


span.c {

  display: block;

  width: 100px;

  height: 100px;

  padding: 5px;

  border: 1px solid blue;

  background-color: yellow;

}

Using inline-block to Create Navigation Links


One common use for display: inline-block is to display list items horizontally instead of vertically. The following example creates horizontal navigation links:
Example

.nav {

  background-color: yellow;

  list-style-type: none;

  text-align: center; 

  padding: 0;

  margin: 0;

}


.nav li {

  display: inline-block;

  font-size: 20px;

  padding: 20px;

}

The document CSS Inline-Block | CSS for Beginners - Class 6 is a part of the Class 6 Course CSS for Beginners.
All you need of Class 6 at this link: Class 6
10 videos|41 docs|23 tests

Top Courses for Class 6

10 videos|41 docs|23 tests
Download as PDF
Explore Courses for Class 6 exam

Top Courses for Class 6

Signup for Free!
Signup to see your scores go up within 7 days! Learn & Practice with 1000+ FREE Notes, Videos & Tests.
10M+ students study on EduRev
Related Searches

Semester Notes

,

Exam

,

shortcuts and tricks

,

CSS Inline-Block | CSS for Beginners - Class 6

,

mock tests for examination

,

Viva Questions

,

pdf

,

Summary

,

ppt

,

Important questions

,

Free

,

Extra Questions

,

CSS Inline-Block | CSS for Beginners - Class 6

,

Sample Paper

,

past year papers

,

CSS Inline-Block | CSS for Beginners - Class 6

,

Objective type Questions

,

practice quizzes

,

Previous Year Questions with Solutions

,

study material

,

MCQs

,

video lectures

;