CSS KUTU MODELİ

Tarhi : 09-05-2017 05:24:33 | Yazar : ÇAĞLAR BOSTANCI

KUTU MODELİ HTML elementlerinin satır düzeyinde ve blok düzeyde oluştururken dikdörtgen bir yer işgal ettikleri ve belli bir konumları bulunmaktadır. Bu duruma kutu modeli denir. width:Kutunun genişliğini belirler.PX,%,em gibi değerler verilir. height:Kutu modelinin yüksekliğini belirler. border:Kutu modelinin kenar çizgilerini ve özeliklerini belirler. margin:Kutunun dış boşluğunu belirler. padding:Kutunun iç boşluğunu belirler. background:Kutunun arkaplanını belirler.


<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
    	<title>CSS KUTU MODELİ</title>
        <!--ÇAĞLARBOSTANCI-->
        <style>
		#kutu{
			width:50%;/*Kutunun genişliğini verir.*/
			height:15em;/*Kutunun yüksekliğini belirler.*/
			background:rgba(0,51,51,0.5);/*Arka plan rengini belirler.*/
			border:1px solid #000;/*Kenarlıkları belirler.*/
			margin:20px;/*Kutunun dış boşluğunu belirler.*/
			padding:20px;/*Kutunun iç boşluğunu belirler.*/
			}
        </style>
    </head>
  <body>
  <div id="kutu">MERHABA DÜNYA</div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS KUTU MODELİ</title>

<style>

#kutu{

width:50%;/*Kutunun genişliğini verir.*/

height:15em;/*Kutunun yüksekliğini belirler.*/

background:rgba(0,51,51,0.5);/*Arka plan rengini belirler.*/

border:1px solid #000;/*Kenarlıkları belirler.*/

margin:20px;/*Kutunun dış boşluğunu belirler.*/

padding:20px;/*Kutunun iç boşluğunu belirler.*/

}

</style>

</head>

<body>

<div id="kutu">MERHABA DÜNYA</div>

</body>

</html>

Margin […]

Devamı...