March 1Mar 1 Administrators CSS display: inline-block The CSS display: inline-block The display: inline-block property combines the features of both inline and block elements. An element with display: inline-block will appear on the same line as other inline or inline-block elements. In addition, you can set the width, height, margin-top, and margin-bottom properties for the element (like block 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 */ padding: 5px; border: 2px solid red; }span.b { display: inline-block; width: 100px; height: 35px; padding: 5px; border: 2px solid red; } span.c { display: block; width: 100px; height: 35px; padding: 5px; border: 2px solid red; } Try it Yourself » Create a Horizontal Navigation Menu A common use for display: inline-block is to display list items horizontally instead of vertically. The following example creates a horizontal navigation menu: Example Create a horizontal navigation menu: .nav { background-color: lightgray; list-style-type: none; padding: 0; margin: 0;}.nav li { display: inline-block; font-size: 18px; padding: 15px;} Try it Yourself » CSS Property Property Description display Specifies the display behavior (the type of rendering box) of an element ★ +1 Sign in to track progress
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.