2

I'm running into this issue where there's a gap between two div tags. Here's my code -- I've tried to manually overwrite the margin/padding associated with the two divs and doesn't seem like it helps.

Here's what the CSS look like

.left_block{
  display: inline-block;
  background-color: blue;
  width:40%;
  height: 2em;
  margin: 0px;
  margin-right: 0px;
  padding-right: 0px;
  border-width: 0px;
  overflow: hidden;
}

.right_block{
  margin: 0px;
  display: inline-block;
  background-color: red;
  width: 59%;
  height: 2em;
  margin-left: 0px;
  padding-left: 0px;
  border-width: 0px;
  overflow: hidden;
}

Here's the HTML part

 <div class="playground">
        <div class = 'left_block'></div>
        <div class = 'right_block'></div>
...

What am I missing?

NinjaDuck
  • 37
  • 4
  • By adding the `float:left` to both blocks solving the problem -- but can anyone help me understanding why that is the case? – NinjaDuck Nov 14 '16 at 07:25

1 Answers1

0

What about using float property? Will it be a problem with your css?

.left_block {
  display: inline-block;
  background-color: blue;
  width: 40%;
  height: 2em;
  margin: 0 auto;
  padding: 0;
  float: left;
}
.right_block {
  display: inline-block;
  background-color: red;
  width: 60%;
  height: 2em;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  float: left;
}
<div class="playground">
  <div class='left_block'></div>
  <div class='right_block'></div>
</div>
GiuServ
  • 1,215
  • 1
  • 13
  • 33
  • 1
    Also You can use flex. [https://css-tricks.com/snippets/css/a-guide-to-flexbox/](Here) is link. In Your case try to remove all white characters in Your HTML gile between "left_block" and "right_block". Sometimes This help. – ciurciurek Nov 14 '16 at 07:30