奇怪的身體溢出 - CSS

我有麻煩設置圖像到身高的100％。我在頁面底部獲得了這個奇怪的空白區域，儘管我在所有內容中都將margin和padding設置爲0。我只能使用overflow-y: hidden，但我更願意弄清楚它爲什麼這樣做。謝謝！奇怪的身體溢出 - CSS

*, 
 
*::before, 
 
*::after { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
} 
 

 
img { 
 
    height: 100%; 
 
}

<img src="https://images.unsplash.com/photo-1429554429301-1c7d5ae2d42e?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=" alt="background" />

來源

2017-03-03 Hudson Taylor

使用vh和vw單位，像魅力一樣工作。 – yBrodsky

使用'display：block'。順便給'*'選擇器設置'margin'和'padding'並不是一個好習慣 – Mattonit

@Mattonit謝謝！爲什麼它不可取？ –