HTML TEMELLERİ
HTML5
İLERİ SEVİYE
CSS TEMELİ
css kutu modeli örnekleri
css kutu modeli özellikleri
css kutu modeli kodları
css kutu modeli nedir
css box model examples
css box model tutorial
css box models
css box model example
css box model properties
css box model alternative
css and box model
css box model code
css box model content
css box model example code
css box model nedir
css new box model
css kutu modeli
css box model practice
css box model size
css box model template
css for box model
css box model transparent
css box model margin padding
css box model margin border padding
margin in css box model
css box model padding margins borders
css box model padding inside
css box model content area
css box model content box
box model css

CSS Box Model(Kutu Modeli)

CSS Box Model(Kutu Modeli)

Web sitenizin elemanları arasında ve kendi içinde boşluk vermeyi öğrenmiştik. Hatta istediğiniz elemanlara kenarlık ekleyerek de onları özelleştirebileceğimizi görmüştük. Şimdi bunların hepsini birleştirerek bir bütün haline getireceğiz. Buna kutu modeli diyoruz. Yani her şey içinde bir kutu gibi yapılar oluşturarak web sitemizi inşa etmeye aslında başlıyoruz. Bu şekilde kutuları birleşerek bir web sitesinin tasarımını oluşturuyoruz. Aşağıdaki resmi incelediğinizde üzerine bir de örnek gördüğünüzde daha iyi anlayacaksınız..

Css
p.paragraf_kutusu {
background-color: #ccc;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
Html
<h2>Css BoxModel(Kutu Modeli)</h2>
<p>Aşağıdaki paragraf kutusunu dikkatli inceleyelim ve yorumlayalım;</p>
<p class="paragraf_kutusu">Arkaplanı gri renkte, 300 px genişliğinde, 15px yeşil sert çizgi kenarlıklı, iç boşluğu her yönden 50px boşluğunda,dış boşluğu 20 px boşluğunda oluşturulmuş paragraf kutusu</p>


Paylaş:

Enes KILIÇ
Webmaster