Css Width ve Height Özellikleri

Width - Height Özellikleri

Width ile nesnelerin genişliği, height ile ise yüksekliği ayarlanır. Genişlik ve yükseklik px, inç, cm, yüzde (%)... gibi şekillerde ifade edilebilir.

Eğer px, % vb bir ifade kullanmaz isek tarayıcı verdiğimiz değeri yüzde cinsinden kabul eder. Yani aşağıdaki örnekte width değeri %500 anlamına gelir.

Html elemanlarının yüksekliği içeriklerine göre kendiliğinden artar veya azalır. Yine de bazen yüksekliği kendimiz belirlemek isteyebiliriz.

Örneğin sayfamızda yan yana kutular yerleştirdik ve kutuların bazılarında az, bazılarında ise çok içerik var. Bu durumda kutuların her birinin yüksekliği farklı olacaktır. Height kullanarak hepsinin yüksekliğini eşitleyebiliriz.

Ayrıca yükseklik ve genişlik için maximum ve minimum değerler belirtilebilir:

max-width: Nesnelerin en fazla hangi genişlikte olabileceğini,

max-height: Nesnelerin en fazla hangi yüksekliğe erişebileceğini,

Maximum değer belirlediğimizde o nesnelerin normalde içeriklerine göre boyutlara sahip olacağını, ancak içerik artsa bile belirttiğimiz genişlik veya yüksekliğin aşılamayacağını söylemiş oluruz.

min-height: Nesnelerin, içindekiler daha az yer kaplasa bile en az ne kadar yüksekliğe sahip olacağını,

min-width: Nesnelerin, içindekiler az yer kaplarken bile en az ne kadar genişliğe sahip olacağını belirlememizi sağlar.

Minimum genişlik veya yükseklik belirttiğimizde ise o elemanın içeriği çok az bile olsa en az bizim belirttiğimiz kadar yer kaplamasını sağlamış oluruz.

Not: Şunu bilmekte fayda var ki, bazı etiketlerde width özelliği işe yaramayabilir. Böyle bir durumda o elemanın display özelliği block vb bir değer yapılabilir. İleriki konularda anlatılacak olan block ve inline kavramları, bu konuyu daha iyi anlamanızı sağlayacaktır. 

KONU İLE İLGİLİ ÖRNEKLER