Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to remove the space between inline-block elements?

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 169
    Comment on it

    Hey Readers!

    We must have all used the display property. One of the values for the property is inline-block. There is a certain problem with these. Inline Blocks have this weird space in-between them. The actual space is in the HTML.

    I am presenting an example below to give you a better understanding of this space problem.

     

    HTML :

    <p>
        <span> Hi </span>
        <span> All </span>
    </p>

     

    CSS :

    span { 
        display:inline-block;
        width:100px;
        background:red;
        font-size:30px;
        color:white; 
        text-align:center;
    }

     

    OUTPUT :

     

    We can see there is a 4px wide space between the SPAN elements.

     

    This is obviously undesired. We do want the elements to stick up against each other. How to make this spacing consistent?

    If we want spaces between words, we simply type the spaces. Right? The spaces between these two inline blocks elements are just like spaces between two words.

    Here are some ways to fight the gap and get the inline-block elements sit directly next to each other.

     

        1. Remove the spaces

     One of these tricks will help you get rid of the spaces.

    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>

     

    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>

     

    <ul>
        <li>one</li>
        <!---->
        <li>two</li>
        <!---->
        <li>three</li>
    </ul>

     

     

        2. Negative margin

    Give negative margin of whatever the amount of space is being occupied to push back the elements.

    ul li {
      display: inline-block;
      margin-right: -4px;
    }

     

     

        3. Skip the closing tag

    <ul>
      <li>one
      <li>two
      <li>three
    </ul>

    Because HTML5 doesn't care.

     

     

        4. Set the font size to zero

    Zero font size is zero width.

    ul {
      font-size: 0;
    }
    ul li {
      font-size: 16px;
    }

     

     

    Happy Coding y'all. :)

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: