Question 274257 in Html Question posted in
Some basic documentation can be found here.

Html – Css is generating a strange gap inside a container when putting inline-block elements side by side

I don’t know why this gap is showing. I cannot see why this is happening I just changed the code from a studying material and doesn’t work.

this is my code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Layout example</title>
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="css/styles.css" />
    <style>
     
       html,
       body {
        padding:0;
        margin:0;
       }

       header {
        width:100%;
        height:100px;
        background-color:red;
       }

       div {
        height:700px;
        margin: 0 auto;
   
       }

       aside {
        width:29.71%;
        background-color: aqua;
        height:700px;
        display: inline-block;
       }

 
       main {
        width:40%;
        height: 700px;
        background-color:pink;
        display: inline-block;

       }


       footer {
        width:100%;
        height:200px;
        background-color:blue;
       }

    </style>
  </head>
  <body>
  
    <div class="Wrap">
       <header>

       </header>

       <div>
        <aside>

        </aside>

        <main>

        </main>

        <aside>

        </aside>

       </div>

       <footer>

       </footer>
    </div>

  </body>
</html>

I don’t know why that gap is showing after the aqua block.

Scenario where the author aligned the items perfectly. I couldn’t find the difference though.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Layout example</title>
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="css/styles.css" />
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }

      .Wrap {
        max-width: 1400px;
        margin: 0 auto;
      }

      .Header {
        width: 100%;
        height: 130px;
        background-color: #038c5a;
      }

      .WrapMiddle {
        width: 100%;
        font-size: 0;
      }

      .Left {
        height: 625px;
        width: 20.83%;
        background-color: #03a66a;
        display: inline-block;
      }

      .Middle {
        height: 625px;
        width: 68.75%;
        background-color: #bbbf90;
        display: inline-block;
      }

      .Right {
        height: 625px;
        width: 10.41%;
        background-color: #03a66a;
        display: inline-block;
      }

      .Footer {
        height: 200px;
        width: 100%;
        background-color: #025059;
      }
    </style>
  </head>
  <body>
    <div class="Wrap">
      <header class="Header"></header>
      <div class="WrapMiddle">
        <aside class="Left"></aside>
        <main class="Middle"></main>
        <aside class="Right"></aside>
      </div>
      <footer class="Footer"></footer>
    </div>
  </body>
</html>
Tags:

2

Answers


  1. 0

    There’s whitespace between the elements:

            <aside>
          <!-- this is inside the element -->
        </aside>
          <!-- this is between the elements -->
        <main>
          <!-- this is inside the element -->
        </main>
          <!-- this is between the elements -->
        <aside>
          <!-- this is inside the element -->
        </aside>

    The other author addressed this with font-size: 0, which isn’t included in your version. You can add it to the containing div (and adjust the widths accordingly of course). For example:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Layout example</title>
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="css/styles.css" />
    <style>
     
       html,
       body {
        padding:0;
        margin:0;
       }

       header {
        width:100%;
        height:100px;
        background-color:red;
       }

       div {
        height:700px;
        margin: 0 auto;
        font-size: 0; /* here */
       }

       aside {
        width:30%; /* and here */
        background-color: aqua;
        height:700px;
        display: inline-block;
       }

 
       main {
        width:40%;
        height: 700px;
        background-color:pink;
        display: inline-block;

       }


       footer {
        width:100%;
        height:200px;
        background-color:blue;
       }

    </style>
  </head>
  <body>
  
    <div class="Wrap">
       <header>

       </header>

       <div>
        <aside>

        </aside>

        <main>

        </main>

        <aside>

        </aside>

       </div>

       <footer>

       </footer>
    </div>

  </body>
</html>
    Login or Signup to reply.
  2. 0

    As @David already explained, you have whitespace between the <main> element and the <aside> elements, and that is significant in an inline formatting context, such as is ordinarily established by a sequence of inline[-block] elements.

    You have multiple alternatives for eliminating the gaps, including at least:

    • remove the whitespace between the elements. This is quick and clean , but ugly and a bit harder to maintain.

      OR

    • force the whitespace to be rendered with size 0. You can do this by setting the parent container’s font-size to zero, which is quick but a bit dirty. If you will be displaying text in the <main> and / or <aside> elements then you would need to compensate there. It will also mess with dimensions expressed in em units.

      OR

    • establish a different kind of formatting context for the elements (flex or grid). This is a bit more work to set up, but clean and maintainable. It is the modern approach to handling complex layouts (and yours is complex enough for the purpose).

      OR

    • position the elements involved manually. This is messy, a bit tricky, and harder to maintain. I see no reason to prefer this over any of the others for your purposes.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search