HTML Element Style How to - Make margin-bottom of inner img and margin-bottom of outer div collapse

Question

We would like to know how to make margin-bottom of inner img and margin-bottom of outer div collapse.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
div img {<!--  w w  w.j  a  v  a2  s  .c o  m-->
  float: right;
  margin: 0 0 10px 10px;
}

div {
  display: inline-block;
  margin-bottom: 10px;
}
</style>
</head>
<body>
  <div>
    <img src="http://www.java2s.com/style/download.png" alt="" /> 
    Some text Some text Some text Some text Some text Some
    text Some text Some text Some text Some text Some text Some text Some
    text Some text Some text Some text Some text Some text Some text Some
    text Some text Some text Some text
  </div>
  More Text More Text More Text More Text More Text More Text
</body>
</html>

The code above is rendered as follows: