Scribd Logo
Upload

Welcome to Scribd!

  • 32 views

    CSS Layout - Inline-Block

    Uploaded by

    Heba Adel

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    CSS Layout - Inline-Block

    Uploaded by

    Heba Adel
    32 views7 pages

    Original Title

    CSS Layout - inline-block

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    32 views7 pages

    CSS Layout - Inline-Block

    Uploaded by

    Heba Adel

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    You are on page 1of 7

     Menu   

    Dark mode

    Dark code
      HTML CSS   

    SolarWinds® Service Desk


    OPEN
    Download The Competitor Report

    CSS Layout - display: inline-block


    ❮ Previous Next ❯

    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;

    Try it Yourself »

    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;
    }
    ‫» ‪Try it Yourself‬‬

    ‫‪❮ Previous‬‬ ‫❯ ‪Next‬‬


    ‫‪ ‬‬

    ‫‪daDoG‬‬
    ‫‪ADVERTISEMENT‬‬

    ‫‪™yddaDoG‬‬
    ‫دعنا ننشر‬
    ‫موقعك‬
    ‫على‬
    ‫اإلنترنت‪.‬‬
    ‫خبراؤنا األذكياء‬
    ‫والودودون موجودون‬
    ‫لمساعدتك في نشر‬
    ‫فكرة أعمالك عبر‬
    ‫اإلنترنت‪.‬‬

    ‫™‪GoDaddy‬‬

    ‫معلومات أكثر‬

    ‫‪NEW‬‬

    ‫
    ‪We just launched‬‬
    ‫‪W3Schools videos‬‬
    Explore now

    COLOR PICKER




    Get certified

    by completing

    a CSS

    course today!

    school
    w3 s
    2
    CE

    02

    TI 2
    R

    FI .
    ED

    Get started

    CODE GAME
    ‫‪Play Game‬‬

    ‫‪ADVERTISEMENT‬‬

    ‫وقعك على الإنترنت‪.‬‬


    ‫دون موجودون لمساعدتك في نشر فكرة أعمالك عبر الإنترنت‪.‬‬

    ‫معلومات أكثر‬

    ‫‪ADVERTISEMENT‬‬

    ‫‪Report Error‬‬
    Spaces

    Pro

    Buy Certificate

    Top Tutorials
    HTML Tutorial

    CSS Tutorial

    JavaScript Tutorial

    How To Tutorial

    SQL Tutorial

    Python Tutorial

    W3.CSS Tutorial

    Bootstrap Tutorial

    PHP Tutorial

    Java Tutorial

    C++ Tutorial

    jQuery Tutorial

    Top References
    HTML Reference

    CSS Reference

    JavaScript Reference

    SQL Reference

    Python Reference

    W3.CSS Reference

    Bootstrap Reference

    PHP Reference

    HTML Colors

    Java Reference

    Angular Reference

    jQuery Reference

    Top Examples
    HTML Examples

    CSS Examples

    JavaScript Examples

    How To Examples

    SQL Examples

    Python Examples

    W3.CSS Examples

    Bootstrap Examples

    PHP Examples

    Java Examples

    XML Examples

    jQuery Examples

    Get Certified
    HTML Certificate

    CSS Certificate

    JavaScript Certificate

    Front End Certificate

    SQL Certificate

    Python Certificate

    PHP Certificate

    jQuery Certificate

    Java Certificate

    C++ Certificate

    C# Certificate

    XML Certificate

    FORUM |
    ABOUT

    W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
    Tutorials,
    references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content.
    While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

    Copyright 1999-2022 by Refsnes Data. All Rights Reserved.

    W3Schools is Powered by W3.CSS.

    You might also like

    pFad - Phonifier reborn

    Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

    Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


    Alternative Proxies:

    Alternative Proxy

    pFad Proxy

    pFad v3 Proxy

    pFad v4 Proxy