CSS inset özelliği

Tanım ve Kullanım

inset Özellik, elementin ebeveyn elementi ile arasındaki mesafeyi ayarlamak için kullanılır.

注意： dikkat: Bu özelliğin etkin olması için

inset position

• Özellik.
• Özellik, aşağıdaki özelliklerin kısaltma biçimidir:
• üst
• alt

inset sol

sağ

inset: 15px 30px 60px 90px;

• Sol mesafesi 90px'tır
• Özellik değerleri farklı yöntemlerle ayarlanabilir:
• inset özelliği üç değere sahipse:
• inset özelliği dört değere sahipse:

Sağ mesafesi 30px'tır

Özellik değeri, üst mesafesi ebeveyn öğesine 15 piksel, sol ve sağ mesafesi ebeveyn öğesine 30 piksel, alt mesafesi ebeveyn öğesine 60 piksel olarak ayarlanır:

• Sol mesafesi 90px'tır
• inset özelliği iki değere sahipse:
• inset özelliği üç değere sahipse:

Üst mesafesi 15px'tır

Örnek 2

• Aşağı mesafesi 60px'tır
• inset özelliği iki değere sahipse:

Sol ve sağ mesafeler 30px'tır

Yukarı ve aşağı mesafeler 15px'tır

• inset özelliği bir değere sahipse:

inset: 10px;

Dört yöndeki mesafeler 10px'tır

Örnek

div {
  Yerleştirme mesafesini ayarlamak için <div> öğesini kullanın:
}

Kişisel olarak deneyin

Örnek 1

<div> öğesinin inset Özellik değeri, sağ ve sol mesafesi ebeveyn öğesine 30 piksel, üst ve alt mesafesi ebeveyn öğesine 15 piksel olarak ayarlanır:

div {
  Örnek 2
}

Kişisel olarak deneyin

Özellik değeri, üst ve alt mesafesi ebeveyn öğesine 15 piksel, sol ve sağ mesafesi ebeveyn öğesine 30 piksel olarak ayarlanır:

<div> öğesinin inset Örnek 3

div {
  Özellik değeri, üst mesafesi ebeveyn öğesine 15 piksel, sol ve sağ mesafesi ebeveyn öğesine 30 piksel, alt mesafesi ebeveyn öğesine 60 piksel olarak ayarlanır:
}

Kişisel olarak deneyin

Örnek 4

<div> öğesinin inset Özellik değeri, üst mesafesi ebeveyn öğesine 15 piksel, sağ mesafesi ebeveyn öğesine 30 piksel, alt mesafesi ebeveyn öğesine 60 piksel, sol mesafesi ebeveyn öğesine 90 piksel olarak ayarlanır:

div {
  inset: 15px 30px 60px 90px;
}

Kişisel olarak deneyin

CSS dilbilgisi

inset: auto|length|initial|inherit;

Özellik değeri

Teknik ayrıntılar

Tarayıcı desteği

Tablodaki rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü gösterir.

İlgili sayfalar

Eğitim:CSS Konumlandırma

Kaynakça：CSS position özelliği

Kaynakça：CSS bottom özelliği

Kaynakça：CSS left özelliği

Kaynakça：CSS right özelliği

Kaynakça：CSS top özelliği