Why the height of div make a gap between the image and div?

Question

Here is my html struct, simple

<div> <img style="width:100%;height:100%"/> </div>

div shows in the chrome:

and the image, there is a gap between the div and image

noticed that the image supposed to cover the div,

if I change the height of div more than 10px, looks perfect.

the image cover the div

I've tested if the height of div is less, the gap is bigger.

So what's the problem?

there is a example I copy a part of the code from my project, need to point to that image in the chrome dev tools:

._display_style {
  display: none;
}

.sketchup_display_style {
  display: block;
}

input.text {
  margin-bottom: 12px;
  width: 95%;
  padding: .4em;
}

fieldset {
  padding: 0;
  border: 0;
  margin-top: 25px;
}

h1 {
  font-size: 1.2em;
  margin: .6em 0;
}

div#users-contain {
  width: 350px;
  margin: 20px 0;
}

div#users-contain table {
  margin: 1em 0;
  border-collapse: collapse;
  width: 100%;
}

div#users-contain table td,
div#users-contain table th {
  border: 1px solid #eee;
  padding: .6em 10px;
  text-align: left;
}

.ui-dialog .ui-state-error {
  padding: .3em;
}

.validateTips {
  border: 1px solid transparent;
  padding: 0.3em;
}

.cab_list_form #shape div img {
  width: 80%;
  height: 80%;
}


/*
	.cab_list_form #shape {
		width:150px;height:200px;
	}*/

.cab_list_form #shape div {
  /*
		width:160px;
		height:160px;
		float:left;
		*/
  padding: 0.2em 0 0.6em;
  text-align: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.cab_list_form #shape div span {
  width: 100%;
  display: block;
}

.toggle-red {
  border: 2px solid red;
}

.cab_style_img {
  background-color: #fff;
  border: 2px solid #ebebeb;
  text-align: center;
}

.cab_style_img img {
  width: 290px;
  height: 240px;
}

.question_img {
  padding-right: 1em;
  float: left;
}

#cab_condition table td label {
  /*
		background-repeat:no-repeat;
		text-align:center;
		padding:0.1em 0.8em 0.3em;
		cursor:pointer;
		width:50px;
		height:100%;
		line-height:20px;
		margin:auto;
		text-align:center;
		*/
  border-radius: 20px;
  text-align: center;
  width: 55px;
  height: 20px;
  line-height: 20px;
  margin: auto;
  background-color: #ffffff;
  cursor: pointer;
  padding: 0 0.5em;
}

#cab_condition table td label input {
  display: none;
}

#cab_condition table td label span {
  margin: 0.1em 0.6em;
}

.howmanypart_td span {
  margin: 0.1em 0.7em;
}

.down_search div {
  background-repeat: no-repeat;
  cursor: pointer;
  text-align: center;
  height: 30px;
  line-height: 30px;
  color: #30b2ba;
  /*
		padding:0.5em 0;
		width:50px;
		
		*/
}

.priceDiv select {
  border: 1px solid #bdbdbd;
  width: 130px;
  height: 28px;
  border-radius: 20px;
  /*text-align:center;*/
  color: #30b2ba;
  cursor: pointer;
}

.door-background {
  position: absolute;
  border: 2px solid #000;
  border-collapse: collapse;
  text-align: center;
  padding: 0;
  margin: 0;
}

.door-background th,
.door-background td {
  border: 2px solid #999;
  border-width: 0 2px 2px 0;
  padding: 0;
}

.tableizer-table {
  border: 1px solid #000;
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}

.tableizer-table th,
.tableizer-table td {
  border: 1px solid #999;
  border-width: 0 1px 1px 0;
  padding: 2px;
}

.wardrobe_type_list {
  width: 100%;
  height: 40px;
}

.wardrobe_type_list .groups_check {
  float: left;
  margin-right: 25px;
  height: 25px;
  line-height: 25px;
}

.wardrobe_type_list .groups_check img {
  height: 100%;
}

.wardrobe_type_list .groups_check input[type=radio] {
  height: 25px;
  line-height: 25px;
}

.display-none {
  display: none;
}

.search-container {
  float: left;
}

body {
  font-size: 14px;
  margin: 15px;
}

.pax_layer {
  position: absolute;
  background-repeat: no-repeat;
}

.pax_highlight {
  position: absolute;
  border: solid 3px #329afb;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 3;
}

.pax_highlight_text {
  color: #329afb;
  font-weight: bold;
  font-size: 12px;
  bottom: 0px;
  margin-bottom: -19px;
  position: absolute;
  text-align: center;
}

#groups_list {
  left: 10px;
  position: relative;
}

#white_hide_menu {
  background-color: white;
  height: 51px;
  position: absolute;
  top: 517px;
  width: 5px;
  display: none;
}

.menu_groups {
  height: 140px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.thumbs_layers_div_a {
  display: none;
}

.items div {
  float: left;
}

.items {
  overflow-x: scroll;
  overflow-y: hidden;
  width: 100%;
  height: 100%;
}

.thumbs_layers_group {
  height: 100px;
}

.thumbs_layers_div {
  background-color: white;
  cursor: pointer;
  float: left;
  margin-left: 8px;
  padding: 1px;
  width: 93px;
  height: 93px;
  text-align: center;
  display: inline-block;
  display: inline;
}

.thumbs_layers_div_selected {
  border-color: #389CFC;
  border-width: 3px;
  background-color: #389CFC;
}

.thumbs_layers_div img {
  border-color: #D1D1D1;
  border-style: solid;
  border-width: 1px;
  height: 91px;
}

.thumbs_layers_add_item {
  width: 100%;
  text-align: center;
  height: 25px;
  line-height: 25px;
  overflow: hidden;
}

.thumbs_layers_div_selected img {
  border-color: #389CFC;
}

.pax {
  height: 180px;
}

#layers_pax_buffer {
  pointer-events: none;
}

#layers_pax_buffer {
  display: none;
  border: 1px solid #CCCCCC;
  width: 1048px;
  height: 585px;
  position: absolute;
  top: 98px;
}

.val {
  width: 1048px;
  height: 150px;
}

#dialog-confirm,
#dialog-confirm2 {
  display: none;
}

.pax_h_dimension {
  display: none;
  position: absolute;
  height: 7px;
  text-align: center;
  font-size: 11px;
  font-style: italic;
  border-width: 0px 1px 0px 1px;
  border-style: solid;
  border-color: #444444;
  line-height: 23px;
  margin-top: -12px;
}

.pax_v_dimension {
  display: none;
  position: absolute;
  width: 7px;
  text-align: center;
  font-size: 11px;
  font-style: italic;
  border-width: 1px 0px 1px 0px;
  border-style: solid;
  border-color: #444444;
}

.pax_h_rule {
  height: 1px;
  background: #444444;
  border: none;
  margin: 3px 0 0px 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

hr {
  margin: 20px 0;
  border: 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #fff;
}

.pax_v_rule {
  width: 1px;
  background: #444444;
  border: none;
  margin: 0 3px 0 0;
  position: absolute;
  left: 3px;
}

.pax_v_text {
  position: absolute;
  top: 50%;
  height: 200px;
  margin-top: -100px;
  margin-left: 88px;
  display: block;
  white-space: nowrap;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
  font-size: 11px;
  font-style: italic;
  pointer-events: none;
}

.drawboard {
  xborder: 2px solid grey;
  position: relative;
  margin: 10px auto;
}

.pax_layer {
  position: absolute;
  background-repeat: no-repeat;
  xborder: 1px solid green;
  background: #f0f0f0;
  overflow: hidden;
}

.pax_highlight {
  position: absolute;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
  box-sizing: border-box;
  z-index: 3;
  border-width: 3px;
  border-style: solid;
  border-color: rgb(50, 154, 251);
}

#main {
  min-width: 800px;
  margin: 0 auto;
  height: auto;
}

.attr {
  width: 90%;
  float: left;
}

.name {
  width: 90%;
  text-align: left;
  margin: 10px;
}

.selectOption {
  width: 130px;
  float: left;
  margin-left: 8px;
  text-align: center;
  /*cursor: pointer;*/
}

.selectPic {
  width: 100px;
  height: 100px;
  border: 3px solid #eee;
  margin: 0 auto;
  overflow: hidden;
}

.selectPic img {
  width: 100%;
}

.selectRadio {
  width: 100%;
  font-size: 12px;
}

.choice_collection {
  width: 70px;
  height: 18px;
  border: 1px solid #bbb;
  float: left;
  margin: 5px;
  padding: 5px;
  text-align: center;
  cursor: pointer;
}

#message {
  width: 140px;
  height: 80px;
  border: 3px solid #ddd;
  margin: 5px;
  padding: 10px;
  float: left;
  background: #eee;
}

#message div {
  margin-bottom: 10px;
}

.button {
  width: 150px;
  height: 40px;
  padding: 10px;
  float: right;
  xmargin-top: 300px;
}

.button button {
  color: rgb(255, 255, 255);
  border: 1px solid rgb(221, 221, 221);
  background: rgb(51, 204, 255);
  width: 80px;
  height: 30px;
  margin: 5px;
  font-size: 14px;
  xfloat: right;
}

.pax {
  border: 3px solid #eee;
  height: auto;
  margin: 20px;
  overflow: hidden;
  min-width: 800px;
  xoverflow-y: hidden;
}

#items_scroll {
  overflow-x: scroll;
  padding: 5px;
}

.thumbs_layers_div {
  overflow: hidden;
  height: 120px;
}

.wardrobe_type_list {
  xpadding-top: 10px;
  xpadding-left: 10px;
  xwidth: 90%;
  margin: 10px;
  margin-bottom: 0;
}

#items {}

.thumbs_layers_div_selected .thumbs_layers_add_item {
  color: white;
}

.v #items img {
  width: 95px;
  height: auto;
}

.v .thumbs_layers_div {
  height: 70px;
}

<div id="drawboard1" class="drawboard" style="width: 250px; height: 300px;">
  <div name="%E5%B7%A6" class="pax_layer" style="top: 0px; left: 4px; width: 121px; height: 300px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="../json/showpickerv2.jsp?prefix=test1&amp;suffix=GTJXG01GMJXG01&amp;width=121">
    <div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;">
      <div>%E5%B7%A6</div>
      <div>宽度:968</div>
      <div>高度:2400</div>
      <div>price:0</div>
      <div>ratioTop:0</div>
      <div>ratioLeft:0</div>
      <div>ratioWidth:0</div>
      <div>ratioHeight:0</div>
    </div>
  </div>
  <div name="copyRight" class="pax_layer" style="top: 0px; left: 125px; width: 121px; height: 300px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="../json/showpickerv2.jsp?prefix=test1&amp;suffix=GTJXG01GMJXG01&amp;width=121">
    <div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;">
      <div>copyRight</div>
      <div>宽度:968</div>
      <div>高度:2400</div>
      <div>price:0</div>
      <div>ratioTop:0</div>
      <div>ratioLeft:0</div>
      <div>ratioWidth:0</div>
      <div>ratioHeight:0</div>
    </div>
  </div>
  <div name="1" class="pax_layer" style="top: 0px; left: 243.75px; width: 6.25px; height: 300px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="../json/showpickerv2.jsp?prefix=test3&amp;suffix=GTJXG01GMJXG01&amp;width=6.25">
    <div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;">
      <div>1</div>
      <div>宽度:50</div>
      <div>高度:2400</div>
      <div>price:0</div>
      <div>ratioTop:0</div>
      <div>ratioLeft:0</div>
      <div>ratioWidth:0</div>
      <div>ratioHeight:0</div>
    </div>
  </div>
  <div name="1" class="pax_layer" style="top: 0px; left: 0px; width: 6.25px; height: 300px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="../json/showpickerv2.jsp?prefix=test3&amp;suffix=GTJXG01GMJXG01&amp;width=6.25">
    <div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;">
      <div>1</div>
      <div>宽度:50</div>
      <div>高度:2400</div>
      <div>price:0</div>
      <div>ratioTop:0</div>
      <div>ratioLeft:0</div>
      <div>ratioWidth:0</div>
      <div>ratioHeight:0</div>
    </div>
  </div>
  <div name="dingxian" class="pax_layer" style="top: -8.125px; left: -6.25px; width: 262.5px; height: 8.125px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="http://i4.piimg.com/4851/4195cbf23b1d9389.jpg">
    <div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;">
      <div>dingxian</div>
      <div>宽度:2100</div>
      <div>高度:65</div>
      <div>price:0</div>
      <div>ratioTop:0</div>
      <div>ratioLeft:0</div>
      <div>ratioWidth:0</div>
      <div>ratioHeight:0</div>
    </div>
  </div>
  <div class="pax_highlight" style="width: 121px; height: 300px; top: 0px; left: 125px; display: none;"></div>
</div>

Answer 1

@Zange-chan you aren't exactly right,once you set the position of one element as "absolute",it would be separated from the DOM flow,and it'd still wrap its subelements actually. The problem is easy to solve ,one solution is setting the display attribute as block for the img. please try it

img{
   display:block;
  }

Answer 2

Try to this

img {
  vertical-align: top;
}

because img vertical-align is baseline - the default value.

more about vertical-align