在div中使用img时的空格

Question

我目前的CSS是

private void totalAll()
{
    int a = 0, b = 0;
    for (a = 0; a < dataGridView1.Rows.Count; ++a)
    {
        b += Convert.ToInt32(dataGridView1.Rows[a].Cells[3].Value);
    }
    textBox1.Text = b.ToString();
}

private void dataGridView1_CellEndEdit(object sender, DataGridViewCellEventArgs e)
{
    foreach (DataGridViewRow row in dataGridView1.Rows)
        totalAll();           
}

html是

.container {
display: block;
width: 400px;
height: auto;
padding: 0px 0px;
background-color: #ffffff;
border: black 1px solid;
}
.container img {
width: 100%;
}

结果如何，我如何摆脱图像下面的空白区域？

Answer 1

你好将显示块应用于图像

div img {
  display: block;
}

Answer 2

img元素的默认显示为inline，图片下方的空白区域为j，y，g等字母上的下划线空间...您可以通过添加vertical-align: top来解决此问题

.container {
  display: block;
  width: 400px;
  height: auto;
  padding: 0px 0px;
  background-color: #ffffff;
  border: black 1px solid;
}
.container img {
  width: 100%;
  vertical-align: top;
}

<div class="container">
  <img src="http://placehold.it/350x150">
</div>