W3.CSS Kenar Boşlukları


w3-margin sınıfı, bir öğenin her tarafına 16 piksel kenar boşluğu ekler.


W3.CSS Marj Sınıfları

W3.CSS, aşağıdaki marj sınıflarını sağlar:

Sınıf tanımlar
w3-marj Bir öğenin her tarafına 16 piksellik bir kenar boşluğu ekler
w3-kenar-üst Bir öğeye 16 piksellik bir üst kenar boşluğu ekler
w3-marj-sağ Bir öğeye 16 piksel sağ kenar boşluğu ekler
w3-marj-alt Bir öğeye 16 piksellik bir alt kenar boşluğu ekler
w3-marj-sol Bir öğeye 16 piksellik bir sol kenar boşluğu ekler
w3 bölümü Bir öğeye 16 piksel üst ve alt kenar boşluğu ekler

marj

w3-margin sınıfı , bir öğenin tüm kenarlarına 16 piksellik bir kenar boşluğu ekler:

w3-margin sınıfı , bir öğenin her tarafına 16 piksel kenar boşluğu ekler.

Örnek

<div class="w3-container w3-margin">
  <p>I have 16px margin on all sides.</p>
</div>

Üst Kenar Boşluğu

w3-margin-top sınıfı , bir öğeye 16 piksellik bir üst kenar boşluğu ekler:

w3-margin-top sınıfı , bir öğeye 16 piksellik bir üst kenar boşluğu ekler .

Örnek

<div class="w3-container w3-margin-top">
  <p>I have 16px margin on the top.</p>
</div>


Alt Kenar Boşluğu

w3-margin-bottom sınıfı , bir öğeye 16 piksellik bir alt kenar boşluğu ekler:

w3-margin-bottom sınıfı , bir öğeye 16 piksellik bir alt kenar boşluğu ekler .

Örnek

<div class="w3-container w3-margin-bottom">
  <p>I have 16px margin on the bottom.</p>
</div>

Sol Kenar Boşluğu

w3-margin-left sınıfı , bir öğeye 16 piksellik bir sol kenar boşluğu ekler:

w3-margin-left sınıfı , bir öğeye 16 piksellik bir sol kenar boşluğu ekler .

Örnek

<div class="w3-container w3-margin-left">
  <p>I have 16px margin the left.</p>
</div>

Sağ Kenar Boşluğu

w3-margin-right sınıfı , bir öğeye 16 piksellik bir sağ kenar boşluğu ekler:

w3-margin-right sınıfı , bir öğeye 16 piksellik bir sağ kenar boşluğu ekler .

Örnek

<div class="w3-container w3-margin-right">
  <p>I have 16px margin the right.</p>
</div>

Bölümler

Birçok HTML öğesinin varsayılan bir üst veya alt kenar boşluğu yoktur. Bu tür öğeler, aralarında boşluk olmadan görüntülenir:

Ben maviyim

ben yeşilim

w3-bölüm sınıfı , öğeleri ayırmak için kullanılabilir.

Herhangi bir HTML öğesine 16 piksel üst ve alt kenar boşluğu ekler :

Ben maviyim

ben yeşilim

Örnek

<div class="w3-container w3-section w3-blue">
  <h1>I am Blue</h1>
</div>

<div class="w3-container w3-section w3-green">
  <h1>I am Green</h1>
</div>