CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)

CSS boyut özelliklerini bir elemanın yüksekliğini ve genişliğini kontrol etmek için kullanılır. Alacağı değer piksel, punto, Yüzde gibi bir ölçü değeri olacaktır. Tüm boyut özelliklerine aşağıdaki tablodan ulaşabilirsiniz.


Özellik Açıklama Değerler
height Elemanların/etiketlerin yükseklik değerini ayarlar. auto
length
%
max-height Elemanların/etiketlerin maksimum yükseklik değerini ayarlar. none
length
%
max-width Elemanların/etiketlerin maksimum genişlik değerini ayarlar. none
length
%
min-height Elemanların/etiketlerin minimum yükseklik değerini ayarlar. length
%
min-width Elemanların/etiketlerin minimum genişlik değerini ayarlar. length
%
width Elemanların/etiketlerin genişlik değerini ayarlar. auto
length
%

Değerlerin açıklaması:


Genişlik ve yükseklik Özellikleri


Genişlik ve yükseklik özelliği bir elemanın içerik alanının genişliğini ve yüksekliğini tanımlar. Bu genişlik ve yükseklik padding, sınırları, ya da kenar boşluklarını içermez. Bakınız CSS kutusu modelini etkin genişlik ve yükseklik nasıl hesaplandığını öğrenin.

Genişlik ve yükseklik özelliği bir uzunluk (px , pt , em , vb), yüzde , ya da auto değerlerini alabilir. Negatif uzunluk değerlerine izin verilmez.

CSS:


    div {
			width: 300px;
			height: 200px;
			background: #EEE8AA;
		}	

HTML:

Bu bir deneme yazısıdır.

ÇIKTI:

css boyut

max-height Özellik


max-height özelliği, bir elemanın maksimum içerik yüksekliğini belirlemenizi sağlar. Elemanımızın içi çok dolu olsada maximum yüksekliği geçmeyecektir. Bu maksimum yükseklik padding sınırları ya da kenar boşluklarını içermez.

Not: max-height daha büyük değer verilen yükseklik(height) özelliğinin değerini geçersiz yapar.

CSS:

    div {
			height: 200px;
			max-height: 100px;
			background: #33cc00;
		}
	p   {
			max-height: 100px;
			background: #F0E68C;
		} 		

HTML:


Bu div öğesinin maksimum yüksekliği 100px ayarlanır, bu nedenle daha uzun olamaz

Bu bir deneme yazısıdır.

css boyut

Yukarı örnekte dikkat ettiyseniz div etiketinde height ve max-height kodu belirtilmiş burda yükseklik(height) değeri büyük verildiği için geçersiz olur. p etiketine maximum yükseklik verildiği halde bu yükseklikte görüntülemez nedeni ise metin yazısı kısa olduğu için metine göre yükseklik artar.

min-height Özellik


min-height özelliği, bir elemanın asgari içerik yüksekliğini belirlemenizi sağlar. Elemanımızın içi dolu olmasa bile belirlediğimiz minimum yükseklikte kalacaktır. Bu minimum yükseklik padding sınırları ya da kenar boşluklarını içermez.

Not: min-height daha küçük değer verilen yükseklik(height) ve max-height özelliğini geçersiz yapar.

CSS:

    div {        
			height: 150px;
			min-height: 200px;
			background: #33cc00;
		}
	p   {
			min-height: 100px;
			background: #F0E68C;
		}

HTML:


Bu div öğesinin minimum yüksekliği 200px ayarlanır, bu yüzden daha küçük olamaz.

Bu bir deneme yazısıdır.


css boyut

Yukarı örnekte yükseklik(height) değeri küçük verildiği için öncelik minumum yükseklikte olduğu için min-height değeri geçerli olur.

max-width Özellik


Max-width özelliği, bir blok maksimum içerik genişliğini belirlemenizi sağlar. Elemanımızın içi çok dolu olsada maximum genişliği geçmeyecektir. Bu maksimum genişlik padding sınırları ya da kenar boşluklarını içermez.

Not: max-width genişliğinden daha büyük değer verilen genişliği(width) özelliğinin değerini geçersiz yapar.

CSS:

        div {
			width: 300px;
			max-width: 200px;
			background: #33cc00;
		    }
		  p {
			float: left;
			max-width: 400px;
			background: #F0E68C;
		    }

HTML:

Bu div elemanının maksimum genişliği 200px ayarlanır, böylece daha geniş olamaz.

Bu bir deneme yazısıdır.

css boyut

Yukarı örnekte genişlik(width) değeri büyük verildiği için aynı zamanda maximum genişlik(max-width) küçük değer verildiği için genişlik(width) değerini geçersiz yapar.

min-width Özellik


min-width özelliği, bir elemanın asgari içerik genişliği belirlemenizi sağlar. Elemanımızın içi boş olsada minimum genişliği geçmeyecektir. Bu minimum genişlik padding sınırları ya da kenar boşluklarını içermez.

Not: min-width daha küçük değer verilen genişliği(width) özelliği geçersiz yapar.

CSS:

        div {
			width: 300px;
			min-width: 400px;
			background: #33cc00;
		}     
		p {
			float: left;
			min-width: 400px;
			background: #F0E68C;
		}

HTML:

Bu div elemanının asgari genişliği 400px ayarlanır, bu nedenle daha dar olamaz.

Bu bir deneme yazısıdır.

ÇIKTI:

css boyut

Yukarı örnekte genişlik(width) değeri küçük değer verildiği için ve min-width değeri belirtildiği için minumum genişlik(min-width) öncelikli olduğu için genişlik(width) özelliği geçersiz yapar.

min-height gibi kodları nerde kullanabiliriz, örneğin Websitemizin veritabanı olsun burdan ziyaretçi yorumlarını çekip mesaj kutumuzda göstermek istersek şöyle kod düzeni oluşturmamız gerekir.

CSS:


    div{height:100%;
	    width:400px;
		background: #F0E68C;
	    border-radius:20px;
	   }

HTML:

Makaleniz çok açıklayıcı teşekkür ederim.

ÇIKTI:

css boyut

Yukarıda gördüğünüz üzere mesaj kısa olduğu için mesaj kutumuz içerik kadar yer kapladığı için websitemizde görüntü bozukluğuna sebep oldu. Min-height özelliğini vererek mesaj kısada olsa kutumuzun belli bir büyüklükte kalmasını sağlayalım.

CSS:


    div{min-height:50px;
	    width:400px;
		background: #F0E68C;
	    border-radius:20px;
	   }
	   
	 p { margin-left:20px; }  

HTML:

Makaleniz çok açıklayıcı teşekkür ederim.

ÇIKTI:

css boyut

Şimdide ziyaretci mesajın çok uzun olduğunu ve belirli yüksekliği geçtiğinde overflow yani taşma özelliğini kullanarak kutumuzun belirli yükseklikte kalmasını kalan içeriğinde scrool vasıtasıyla görmeyi sağlayalım.

CSS:


    div{min-height:50px;
	    max-height:200px;
		overflow: scroll;
	    width:400px;
		background:#F0E68C; 
	   }
    p{margin-left:10px;} 

HTML:

Lorem Ipsum nedir?: Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.


ÇIKTI:

css boyut

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

8071

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML FORM OLUŞTURMA
  • HTML DİV ve SPAN NEDİR?
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.