CSS genişliği Özellik
Örnek
Üç <div> öğesinin genişliğini ayarlayın:
div.a {
width: auto;
border: 1px
solid black;
}
div.b {
width: 150px;
border: 1px solid black;
}
div.c {
width:
50%;
border: 1px solid black;
}
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
Özellik width
, bir öğenin genişliğini ayarlar.
Bir öğenin genişliğine dolgu, kenarlık veya kenar boşlukları dahil değildir!
Not: Min -width ve
max-width özellikleri, özelliği geçersiz kılar width
.
Varsayılan değer: | Oto |
---|---|
Miras: | Hayır |
canlandırılabilir: | Evet. Canlandırılabilir hakkında bilgi edinin |
Sürüm: | CSS1 |
JavaScript sözdizimi: | nesne .style.width="500px" |
Tarayıcı Desteği
Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
Property | |||||
---|---|---|---|---|---|
width | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
CSS Sözdizimi
width: auto|value|initial|inherit;
Mülk değerleri
Value | Description | Play it |
---|---|---|
auto | Default value. The browser calculates the width | |
length | Defines the width in px, cm, etc. Read about length units | |
% | Defines the width in percent of the containing block | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Daha fazla örnek
Örnek
Yüzde değeri kullanarak bir <img> öğesinin genişliğini ayarlayın:
img {
width: 50%;
}
Örnek
Bir <input type="text"> öğesinin genişliğini 100 piksel olarak ayarlayın. Ancak, odaklandığında 250 piksel genişliğinde yapın:
input[type=text] {
width: 100px;
}
input[type=text]:focus {
width: 250px;
}
İlgili Sayfalar
CSS eğitimi: CSS Yüksekliği ve Genişliği
CSS eğitimi: CSS Kutusu modeli
CSS referansı: yükseklik özelliği
HTML DOM referansı: genişlik özelliği