div element and display inline-block

Question

I've tried for a while to understand why this code doesn't works as expected.

The following code should display a white stripe, green stripe, white stripe, without gap.

There's three divs inside a container, all 2 div are 20% width, one is 60% width, border, padding, margin is 0.

The question is why do I still see a "margin", between white and green block?

if you wanna give a try

https://jsbin.com/lexekimoba/edit?html,css,output

* {
  margin: 0;
  padding: 0;
  border: 0px solid red;
}

body {
  background-color: #888;
}

.container1 {
  background-color: #aaa;
}

.main {
  width: 60%;
  background-color: green;
  display: inline-block;
  box-sizing: border-box;
}

.side {
  box-sizing: border-box;
  width: 20%;
  display: inline-block;
  background-color: white;
}

<div class="container1">
  <div class="side">s</div>
  <div class="main">
    abcdef
  </div>
  <div class="side">s</div>
</div>

Your code sets both left and right sides to white, regardless of how they display. You need an extra class in order to get a red div or else you will end up with white|green|white. Your `solid red` is only a `border` `style` and `color` and as it has no line width (it's set to 0) it will never show Remove the background color from the side and create two other classes ; l and r ( for left and right) Add the class after side (.l/.r) in html to get white on left and red to right .main {width: 58.5%; etc.. }.side {same ..remove bgcolor} .l{background-color:white;} .r{background-color:red;} — Rachel Gallen, Jun 02 '17 at 17:32

Nadir Laskar · Answer 1 · 2017-06-02T17:04:05.840

White space between two inline divs are considerable and visible.

Try removing all white spaces between inline divs.

For better explanation read this great article by css-tricks

Fighting the Space Between Inline Block Elements

Here's the deal: a series of inline-block elements formatted like you normally format HTML will have spaces in between them.

Also, you may want to read Remove Whitespace Between Inline-Block Elements

score 1 · Answer 2 · answered Jun 02 '17 at 16:54

Remove the white space between the divs

*{ 
 margin: 0;
 padding: 0;
 border: 0px solid red;  
}


body{
 background-color: #888;
 
}

.container1{ 
 background-color: #aaa;
 
}

.main{
 width: 60%;
 background-color: green;
 display: inline-block;
 box-sizing: border-box; 
 
}

.side{
    box-sizing: border-box;
 width: 20%;
 display: inline-block;
 background-color: white;
  
}

<!DOCTYPE html>
<html>
 <head>
  <title>div align</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" type="text/css" href="divalign.css">
 </head>
 <body>

  <div class="container1">
          <div class="side">s</div><div class="main">
     abcdef 
   </div><div class="side">s</div>
          
  </div>


 </body>
</html>

or use  between the inline block elements.

*{ 
 margin: 0;
 padding: 0;
 border: 0px solid red;  
}


body{
 background-color: #888;
 
}

.container1{ 
 background-color: #aaa;
 
}

.main{
 width: 60%;
 background-color: green;
 display: inline-block;
 box-sizing: border-box; 
 
}

.side{
    box-sizing: border-box;
 width: 20%;
 display: inline-block;
 background-color: white;
  
}

<!DOCTYPE html>
<html>
 <head>
  <title>div align</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" type="text/css" href="divalign.css">
 </head>
 <body>

  <div class="container1">
          <div class="side">s</div><!--
   --><div class="main">
     abcdef    
   </div><!-- 
          
          --><div class="side">s</div><!--
          
  --></div>


 </body>
</html>

You can read more about it here

score 1 · Accepted Answer · answered Jun 02 '17 at 16:57

It's due to the linebreaks between the DIVs (in the HTML code). If you remove those, it works:

* {
  margin: 0;
  padding: 0;
  border: 0px solid red;
}

body {
  background-color: #888;
}

.container1 {
  background-color: #aaa;
}

.main {
  width: 60%;
  background-color: green;
  display: inline-block;
  box-sizing: border-box;
}

.side {
  box-sizing: border-box;
  width: 20%;
  display: inline-block;
  background-color: white;
}

<div class="container1">
  <div class="side">s</div><div class="main">
    abcdef
  </div><div class="side">s</div>
</div>

div element and display inline-block

3 Answers3