CSS Genişlik (Width) – Yükseklik (Height) Ayarlama – Tasarım Kodlama
CSS

CSS Genişlik (Width) – Yükseklik (Height) Ayarlama

CSS’ te bir öğenin yüksekliğini ve genişliğini ayarlamak için height ve width özellikleri kullanılır. Genişlik ve yükseklik değeri olarak px, cm ya da % lik bir değer verilebilir. Eğer hiçbir değer verilmemişse tarayıcı tarafından otomatik olarak bu değer belirlenir.

Örnek:

 

Not:Bir öğenin  Genişlik ve Yükseklik değeri, padding, border, margin değerlerini içermez. Öğenin genişliği veya yüksekliği ayarlanırken bunlar göz önüne alınmalıdır. 

 

CSS Maximum Genişliği Ayarlama (max-width)

max-width özelliği, bir öğenin maksimum genişliğini ayarlamak için kullanılır.

Maksimum genişlik, px, cm vb. Gibi uzunluk değerlerinde veya içerilen bloğun yüzdesi (%) olarak belirlenebilir. Hiçbir değer verilmezse Maksimum genişlik olmadığı anlamına gelir).

Aşağıdaki örneği incelediğinizde iki div öğesi bulunduğunu ve bu divlerden birine max-width özelliği verildiğini ve diğerine verilmediğini göreceksiniz. Bilindiği gibi div öğeleri block öğelerdir.
Aşağıdaki kodları yazıp çalıştırdığınızda ve pencere boyutunu daraltıp genişlettiğinizde  ilk div için max-width özelliği 500px verildiğinden daha fazla genişlemediğini, ikinci div‘ in ise pencere boyutuna göre genişliğinin değiştiğini göreceksiniz.

 

Diğer CSS Boyulandırma Özellikleri

All CSS Dimension Properties

PropertyDescription
heightÖğenin yüksekliğini ayarlar
max-heightMakimum yüksekliği ayarlar
max-widthMaksimum genişliği ayarlar
min-heightMinimum yüksekliği ayarlar
min-widthMinimum genişliği ayarlar
widthGenişliği ayarlar

 

 

Yorum bırak