Eşleştiği elementin padding, margin, border değerleri dahil etmeksizin genişliğini saf olarak almanızı yada değiştirmenizi sağlar.
$("a").click(function(){
$("div").width(300);
});
.width()
.width( value )
.width( function )
Elementlerin genişliğini ayarlamak için kullanılır.
div {
background :red;
color: white;
width: 300px;
height: 300px;
text-align:center;
}
| Değer | Açıklama |
| auto | Genişlik tarayıcı genişliğine göre otomatik ayarlanır. |
| length | Elementin px,cm,pt,yüzdeli vs. değerler alabileceğini belirtir. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 3.0 | 1.0 | 3.5 |
Bir elementin outline çizgisinin kalınlığını belirlemek için kullanılır.
div {
width: 300px;
padding: 20px;
outline-style: dashed;
outline-color: green;
outline-width: 10px;
margin: 30px;
}
| Değer | Açıklama |
| medium | Outline genişliğini orta olarak ayarlar. |
| thin | Outline genişliğini ince olarak ayarlar. |
| thick | Outline genişliğini kalın olarak ayarlar. |
| length | px, cm, % gibi değerler alabilir. |
| İnital | |
| İnherit |
| 1.0 | 1.5 | 8.0 | 1.2 | 7.0 |
Bir elementin minimum genişliğini ayarlamak için kullanılır. Bu özellik elementin daha fazla küçülmesine engel olur.
div {
background: red;
color: white;
min-width: 200px;
}
| Değer | Açıklama |
| none | Hiç bir değer almaz. |
| length | px, cm, % gibi değerler alabilir. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 7.0 | 2.0.2 | 7.0 |
Bir elementin maximum genişliğini ayarlamak için kullanılır. Bu değer elementin daha fazla genişlemesine engel olur.
div {
max-width: 500px;
background: red;
color: white;
}
| Değer | Açıklama |
| none | Hiç bir değer almaz. |
| length | px, cm, % gibi değerler alabilir. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 7.0 | 2.0.2 | 7.0 |
Sütunlar için en uygun genişliği belirtir.
.column {
-webkit-column-width: 200px; /* Chrome, Safari, Opera */
-moz-column-width: 200px; /* Firefox */
column-width: 200px;
}
| Değer | Açıklama |
| auto | Sütunlar için genişlik tarayıcı tarafından belirlenir. |
| length | Sütunların alacağı genişliği belirtilen genişlik değeridir. |
| İnital | |
| İnherit |
| 4.0-webkit | 2.0-moz | 10.0 | 3.1-webkit | 11.1 15.0-webkit |
Sütunlar arasındaki kesmenin genişliğini ayarlar.
.column {
/* Chrome, Safari, Opera */
-webkit-column-count: 5;
-webkit-column-gap: 60px;
-webkit-column-rule-style: dotted;
-webkit-column-rule-width: 3px;
/* Firefox */
-moz-column-count: 5;
-moz-column-gap: 60px;
-moz-column-rule-style: dotted;
-moz-column-rule-width: 3px;
column-count: 5;
column-gap: 60px;
column-rule-style: dotted;
column-rule-width: 3px;
}
| Değer | Açıklama |
| medium | Sütunlar arasındaki kesmenin genişliğini orta olarak ayarlanır. |
| thin | Sütunlar arasındaki kesmenin genişliğini ince olarak ayarlanır. |
| thick | Sütunlar arasındaki kesmenin genişliğini kalın olarak ayarlanır. |
| length | Sütunlar arasındaki kesmenin genişliğini istenilen boyutta ayarlanır. |
| İnital | |
| İnherit |
| 4.0-webkit | 2.0-moz | 10.0 | 3.1-webkit | 11.1 15.0-webkit |
Elementin kenarlık kalınlığını belirlemek için kullanılır.
#border{
border-style: DOTTED;
border-width: 5px;
padding: 10px;
}
| Değer | Açıklama |
| medium | Kenarlık genişliğini orta olarak ayarlar. |
| thin | İnce bir kenarlık olacağını belirtir. |
| thick | Kalın bir kenarlık olacağını belirtir. |
| length | Elementin px,cm,pt,yüzdeli vs. değerler alabileceğini belirtir. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 4.0 | 1.0 | 3.5 |
Elementin üst kenarlık genişliğini ayarlamak için kullanılır.
Not: Her zaman için önce border-top-width özelliklerini ayarlayınız. Rengi değiştirmek için önce border elementiniz olması gerekir.
#borderTop{
border-style: dotted;
border-top-width: 5px;
padding: 10px;
}
| Değer | Açıklama |
| medium | Kenarlık genişliğini orta olarak ayarlar. |
| thin | İnce bir sağ kenarlık belirtir. |
| thick | Kalın bir sağ kenarlık belirtir. |
| length | Elementin px,cm,pt,yüzdeli vs. değerler alabileceğini belirtir. |
| İnital | |
| İnherit |
| 1.0 | 1.0 | 4.0 | 1.0 | 3.5 |
Elementin Sağ kenarlık genişliğini ayarlamak için kullanılır.
Not: Her zaman için önce border-right-width özelliklerini ayarlayınız. Rengi değiştirmek için önce border elementiniz olması gerekir.
#borderRight {
border-style: solid;
border-right-width: 15px;
padding: 10px;
}
| Değer | Açıklama |
| medium | Kenarlık genişliğini orta olarak ayarlar. |
| thin | İnce bir sağ kenarlık belirtir. |
| thick | Kalın bir sağ kenarlık belirtir. |
| length | Elementin px,cm,pt,yüzdeli vs. değerler alabileceğini belirtir. |
| İnital | |
| İnherit |
| 15.0 | 15.0 | 11.0 | 6.0 | 15.0 |