SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Sep 2013
    Location
    Chennai
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Difference between inline and inline block in CSS

    I am new to web designing. can any one explain me the difference between "display: inline" and "display:inline-block" in CSS. Please give me a example if possible.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    display:inline makes the element create inline-boxes which basically means that dimensions don't apply and vertical margins no longer work. Vertical padding can be added but cannot increase the height of the element greater than it's line height and so may overlap subsequent lines.

    Inline elements (or elements with a display of inline) can be wrapped around text (or other inline content) and used for styling but won't affect the position of the text as such.

    It's easier seen in a short demo.


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .inline, .inline-block {
    	width:100px;
    	height:100px;
    	border:1px solid #000;
    	background:red;
    	display:inline-block;
    }
    .inline { display:inline }
    </style>
    </head>
    
    <body>
    <h1>Inline elements</h1>
    <div class="inline"> I am an element with a display of inline </div>
    <div class="inline"> I am an element with a display of inline</div>
    <div class="inline"> I am an element with a display of inline</div>
    <div class="inline"> I am an element with a display of inline</div>
    <h2>Inline-block elements</h2>
    <div class="inline-block"> I am an element with a display of inline-block</div>
    <div class="inline-block"> I am an element with a display of inline-block</div>
    <div class="inline-block"> I am an element with a display of inline-block</div>
    <div class="inline-block"> I am an element with a display of inline-block</div>
    </body>
    </html>
    inline-blocks on the other hand can have dimensions like block boxes but will shrink to fit the content rather than stretching full width as block boxes do. It allows for a series of block elements to behave as though they were on the same line (much like floating).

    The easiest way to work out what they do is just to play around with the demo above and see what happens.

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Luca tall View Post
    I am new to web designing. can any one explain me the difference between "display: inline" and "display:inline-block" in CSS. Please give me a example if possible.
    If you have display:inline;, the content of that element just becomes part of the paragraph, usually with other formatting applied to it, but essentially you have a continuous run of text in one side and out the other.

    If you have display:inline-block;, you get a block that sits in the middle of a paragraph. Within that block, you can set a specific height, you can have text wrapping onto several lines. The best analogy I can think of is in MS Word, where you have a picture that is set to "in line with text". It can be particularly useful when lining up several blocks side-by-side, where you don't want to use float on actual blocks.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •