dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: inline-block spacing problem

  1. #1
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,924

    Question inline-block spacing problem

    Could someone explain to me why there is a space between
    the inline-block elements in the following code.

    I can increase the margin spacing, but I can not eliminate it
    and I have no reason or explanation why.


    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> inline-block demo </title>
    
    <!-- From: https://css-tricks.com/snippets/css/clear-fix/ -->
    <style>
     .box { height: 150px; width: 25%; border: 1px solid black; }
    
     .inline-block { display: inline-block; margin: 0; background-color: lime; }
    </style>
    
    </head>
    <body>
    
    <div> <h2>inline-block Class</h2>
      <div class="box inline-block">inline-block 1</div>
      <div class="box inline-block">inline-block 2</div>
      <div class="box inline-block">inline-block 3</div>
    </div>
    <div>
     inline-block element<br>
     Why the spaces between the blocks when margin:0 ?
    </div>
    
    </body>
    </html>

  2. #2
    Join Date
    Dec 2012
    Posts
    1,587
    The reason is that there are blanks and a linebreak between the divs. This is text and the browser renders it to an empty space. Remove them and every thing is fine:
    Code:
        <div>
            <h2>inline-block Class</h2>
            <div class="box inline-block">inline-block 1</div><div class="box inline-block">inline-block 2</div><div class="box inline-block">inline-block 3</div>
        </div>

  3. #3
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,924
    Quote Originally Posted by Sempervivum View Post
    The reason is that there are blanks and a linebreak between the divs. This is text and the browser renders it to an empty space. Remove them and every thing is fine:
    Code:
        <div>
            <h2>inline-block Class</h2>
            <div class="box inline-block">inline-block 1</div><div class="box inline-block">inline-block 2</div><div class="box inline-block">inline-block 3</div>
        </div>
    Aha! I thought spaces were ignored.

    I had a work-around, but wanted to understand the underlying principles.
    Code:
     .inline-block { display: inline-block; margin: 0 -2px; background-color: lime; }
    Thanks 'Sempervivum'.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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