Kenar Boşluğu ve Dolgu davranışı

Kenar boşluklarından garip davranış alıyorum. Alt tarafa yakın bir yer olmamasına rağmen dikey bir kaydırma çubuğu belirir. Bunu test ettiğimi ve Chrome, IE11 ve Firefox'un en son sürümlerinde aynı sonuçları aldığımı düşünürsek, bunun istenen davranış olduğunu varsayalım.Kenar Boşluğu ve Dolgu davranışı

body olmayana kenar boşluğunda padding0.1px için sonuçlar değiştirme kaydırma

<html> 
<head> 
<style> 
body { 
    margin: 0; 
    height: 100%; 
    padding: 1px; 
} 

div { 
    margin: 15px; 
}  
</style> 
</head> 
<body> 
<div>Hmm</div> 
</body> 
</html>

de aşağıdaki kod. body 'un padding' un 0px ile değiştirilmesi de bir kenar boşluğuna neden olur. Ayrıca, body için box-sizing: border-box eklenmesi, padding sıfır olmadıkça kaydırma çubuğunu kaldırır.

Bir Fiddle eklemedim çünkü orada kopyalayamıyorum. Bunu basit bir html dosyasında test etmeniz gerekir.

Bu aslında beklenen davranış mı? Bunu böyle uyguladıklarına dair mantıklı bir açıklama var mı?

kaynak

2016-04-10 r.h

Kaydırma çubuğunun bir height tanımını ve padding değerini ayarlamanın birleşiminin sebebi gibi görünüyor. height özelliği, bu değere eklenen kenar boşluğu ve dolgu eklenmesi hariç, bir öğenin içeriğinin yüksekliğini belirler. Kaydırma çubuğu eklendikten sonra görüntülenir; çünkü öğenin yüksekliğinin içeriğini sayfanın% 100'üne ve dolguya ekleyerek öğenin tüm yüksekliğinin taşmasına neden olursunuz.

Buna ek olarak, bir elemana box-sizing uygulanması height ve width özellikleri değeri padding içerir yapar. Komik olan, margin içermez. Uygulamak için:

body { 
    box-sizing: border-box, 
    margin: 1px, 
    padding: 0 
}

Yine de kaydırma çubuğunu görüyorsunuz. Bir öğenin height özelliğinin, varsayılan olarak yalnızca öğenin içindeki içeriğin yüksekliğini belirlediğini anladıktan sonra, biraz daha anlamlı olur.

Umut bu yardımcı olur :)

kaynak

2016-04-10 19:19:23

bunun yüksekliğinin hepsini almak yapar% 100'e vücudun yüksekliğini ayarlama html unsurdur ebeveyn element. Html elemanının genişliği ve yüksekliği, içinde bulunduğu pencere tarafından yönetilir. Bir kenar boşluğu veya kenarlık eklemek, mevcut alanı aşarak boyutları arttırarak kaydırma işlemini başlatır. Bununla birlikte, diğer sorun, kenar boşluğunu div'a eklemek, gövdeyi 15 piksel kadar aşağı itmektir. Bunun çöküş kenarları ile ilgisi var. Daha fazla bilgi için https://stackoverflow.com/a/2680515/6184852'a bakın.

kaynak

2016-04-10 19:24:22

Kenar Boşluğu ve Dolgu davranışı

cevap

İlgili konular