Html de elementler belirli bir alan kaplar. Bu alana Css de kutu modeli denir.
Kutu modeli, Html elementlerinin içerik(Content), iç boşluk(padding), sınır (border) ve dış boşluk(margin) dan oluşur. Aşağıdaki örnek resimde görüldüğü gibidir.
CSS kutu modeli yukarıdaki resimde görüldüğü gibi yapıya sahiptir.
Content(İçerik): Metin ve resimlerin görüneceği kutunun içeriğidir. Örneğin p etiketinin metin (yazı) kısmıdır.
Padding(İç Boşluk): İçeriğin etrafında bir alan oluşturur. Bu alan daima şeffaftır. Yani padding e renk atanamaz. İçerik ile border arasındaki alandır.
Border(Sınır-Çerçeve): İçerik ve İç Boşluğun etrafını saran çerçeveye denir. Elementlerin etrafında çerçeve oluşturmak veya etrafının belirli kısımlarında hat(çizgi) oluşturmak için kullanılır.
Margin(Dış Boşluk): Çerçevenin dışında kalan alana denir. Diğer elemanlarla arasındaki boşluğa deriz. Elementlerin birbirine yapışmasını önlenmek için kullanılır.
Width(Genişlik): Etiketin genişliğini tanımlamada kullanırız.
Height(Yükseklik): Etiketin yüksekliğini tanımlamada kullanırız.
Örnek:
öRNEK
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 300px;
margin: 30px;
border: 20px solid yellow;
padding: 30px;
}
</style>
</head>
<body>
<h3>CSS Kutu Modeli</h3>
<div>Lorem ipsum dolor sit
amet consectetur adipisicing
elit. Officia animi voluptas
dolorum quod quae veritatis,
maxime nemo aut repellat,
veniam dolore nisi dicta,
iusto illum ullam.Distinctio,
repudiandae provident. Laudantium.
</div>
</body>
</html>Tarayıcıdaki Sonucu:
Yukarıda görüldüğü gibi mavi çizgi içinde kalan kısım içerik alanı(content), mavi çizgi ile sarı kalın çizgi arası iç boşluk(padding), sarı kalın çizgi çerçeve(border) ve sarı kalın çizgi dışındaki diğer elemanlarla aradaki alan ise dış boşluk (margin) dur.
Başka bir yazımızda görüşmek dileğiyle…
