How to remove the space between inline-block elements?

We can easily remove the space between inline-block elements. Before moving further, let us first create an HTML document and add inline-block elements with space −

Example

<!DOCTYPE html>
<html>
<head>
   <title>Inline block elements</title>
   <style>
      li {
         display: inline-block;
         width: 150px;
         font-size: 18px;
      }
      li:nth-child(1) {
         background: green;
         color: white;
      }
      li:nth-child(2) {
         background: orange;
         color: black;
      }
      li:nth-child(3) {
         background: blue;
         color: white;
      }
      li:nth-child(4) {
         background: red;
         color: black;
      }
   </style>
</head>
<body>
   <h1>Free Tutorials</h1>
   <p>We have the following tutorials right now:</p>
   <ul>
      <li>Java</li>
      <li>Python</li>
      <li>Machine Learning</li>
      <li>Automation</li>
   </ul>
</body>
</html>

Let us now see some examples to remove the space between inline-block elements −

Remove the space between inline-block elements

We can remove the space between inline-block elements by arranging the unordered list items in a single line −

Example

<!DOCTYPE html>
<html>
<head>
   <title>Inline block elements</title>
   <style>
      li {
         display: inline-block;
         width: 150px;
         font-size: 18px;
      }
      li:nth-child(1) {
         background: green;
         color: white;
      }
      li:nth-child(2) {
         background: orange;
         color: black;
      }
      li:nth-child(3) {
         background: blue;
         color: white;
      }
      li:nth-child(4) {
         background: red;
         color: black;
      }
   </style>
</head>
<body>
   <h1>Free Tutorials</h1>
   <p>We have the following tutorials right now:</p>
   <ul>
      <li>Java</li><li>Python</li><li>Machine Learning</li><li>Automation</li>
   </ul>
</body>
</html>

Remove the space between inline-block elements by skipping closing tags

We can also remove the space by skipping the clasing tags −

Example

<!DOCTYPE html>
<html>
<head>
   <title>Inline block elements</title>
   <style>
      li {
         display: inline-block;
         width: 150px;
         font-size: 18px;
      }
      li:nth-child(1) {
         background: green;
         color: white;
      }
      li:nth-child(2) {
         background: orange;
         color: black;
      }
      li:nth-child(3) {
         background: blue;
         color: white;
      }
      li:nth-child(4) {
         background: red;
         color: black;
      }
   </style>
</head>
<body>
   <h1>Free Tutorials</h1>
   <p>We have the following tutorials right now:</p>
   <ul>
      <li>Java
      <li>Python
      <li>Machine Learning
      <li>Automation
   </ul>
</body>
</html>

Updated on: 17-Oct-2022

529 Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements