Merhaba. Örnek bu resime bakarken ne demek istediğimi anlayacaksınız. Mesela
container diye bir div oluşturdum diyelim ve bu div içerisinde de
main adında ana bir div etiketimin olduğunu hayal edelim. Bu
container için işte nedir margin: 0 auto; width: 95%; verdim diyelim. Ana divim olan main de öyle birşey yapmak istiyorum ki, her cihazda bir yükseklik değeri alsın her PC üzerinden aşağıdan yukarıdan soldan sağdan da bir boşluk olsun. Yani bunu aslında body etiketine padding: 2rem vererek de hall edebilirim ama tam yükseklik değeri istediğim gibi olmuyor.
Umarım ne demek istediğimi anlatabilmişimdir.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non odio aperiam id asperiores quaerat nobis dolore adipisci repellat, quia expedita modi repudiandae animi cumque at amet harum quam nam. Tenetur!
</div>
</div>
</body>
</html>* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #c9c9c9;
}
.container {
width: 95%;
margin: 0 auto;
}
.main {
min-height: 50%;
background: #dfdfdf;
}Mesela burada arkaplanı yani şu renk koduna sahip olan kısımdan bahsediyorum #464955 burayı body olarak düşünün. Kenar boşlukları da neredeyse 12rem olarak düşünebilirsiniz.