0

Three div.sons were put vertically with no blank between them. Here is the css code and displayed image.

<html>
<header>
<style type="text/css">
div.father {
  border: 1px solid black;
  height: 364px;
  width: 364px;

}
div.son {
  border: 1px solid black;
  height: 100px;
  width: 100px;
  padding-top:20px;
  padding-left:20px;
}
</style>

</header>
<body>
    <div class="father">
    <div class="son">box1</div> 
    <div class="son">box2</div>
    <div class="son">box3</div>
    </div>
</body>
</html>

enter image description here

There is no blank between div.sons for the vertically displayed div.son.

Now let's make all div.sons horizontally displayed.

<html>
<header>
<style type="text/css">
div.father {
  border: 1px solid black;
  height: 364px;
  width: 400px;

}
div.son {
  margin:0px;
  padding:0px;
  border: 1px solid black;
  height: 100px;
  width: 100px;
  padding-top:20px;
  padding-left:20px;
  display:inline-block;
}
</style>

</header>
<body>
    <div class="father">
    <div class="son">box1</div> 
    <div class="son">box2</div>
    <div class="son">box3</div>
    </div>
</body>
</html>

The displayed image is as the following.

enter image description here

How to remove all the blank between div.sons for the horizontally displayed image?

2

4 Answers 4

3

add float: left; for son class in css

1

One problem that arrises when you use inline-block is that whitespace in HTML becomes visual space on screen.

There are a few ways to remove that space

Like this: https://jsfiddle.net/j6rcfkmz/

0

Also Flexbox can be used.

.son {
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  border: 1px solid red;
}
.son li {
  list-style:none;
  width: 200px;
  height: 200px;
  border: 1px solid green;
}
<ul class="son">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

0

This is a common issue with using display inline-block, instead of this you should use float left on the elements with the class of 'son'.

1
  • Little more explanation would be more helpful for future readers.
    – serenesat
    Jan 31, 2016 at 10:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.