html tutorial - How to remove the space between inline-block elements in CSS - html5 - html code - html form



Answer: Remove space between the elements

    The CSS display property with the value inline-block is extremely helpful for controlling the dimensions also as margin and padding of the inline components. However, whereas using the inline-block visual format the whitespace within the markup language code creates some visual space on the screen. But you can get rid of it using the following simple techniques.

    Solution 1: Remove Space Between Elements

      Example

        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="utf-8">
        <title>Remove Extra Space Between Inline-Block Elements</title>
        <style type="text/css">
            ul {
                padding: 0;
                list-style: none;
            }
            ul li {
                display: inline-block;
                background: #87CEEB;
                padding: 5px 20px;
            }
        </style>
        </head>
        <body>
            <h2>Person Details</h2>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            <hr>
            <h2>After Removing Spaces</h2>
            <ul>
                <li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li>
            </ul>
        </body>
        </html>

        Solution 2: Set Zero Font Size on Parent Element

          Example

            <!DOCTYPE html>
            <html lang="en">
            <head>
            <meta charset="utf-8">
            <title>Remove Extra Space Between Inline-Block Elements</title>
            <style type="text/css">
                ul {
                    padding: 0;
                    list-style: none;
                    font-size: 0;
                }
                ul li {
                    font-size: 16px;
                    display: inline-block;
                    background: skyblue;
                    padding: 5px 20px;
                }
            </style>
            </head>
            <body>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </body>
            </html>

            You can also utilize the negative margin of 4 pixels like margin: -4px; on the inline-block elements to fix this problem, however the above two methods are more straightforward.


            Related Searches to How to remove the space between inline-block elements in CSS