Kenar boşluğu ve dolgu arasındaki fark nedir?

CSS'de marj ve dolgu arasındaki fark tam olarak nedir ? Gerçekten pek bir amaca hizmet etmiyor gibi görünüyor. Farklılıkların nerede olduğu konusunda bir örnek verebilir misiniz (ve farkı bilmek neden önemlidir)?

paddingiçerik ve arasındaki boşluktur borderoysa marginsınırında dışında alandır. İşte hızlı bir Google aramasında bulduğum ve bu fikri gösteren bir resim.

Buradaki cevaplarda eksik olan önemli bir şey:

Üst / Alt kenar boşlukları katlanabilir.

Dolayısıyla, bir öğenin altında 20 piksel kenar boşluğu ve sonraki öğenin üstünde 30 piksel kenar boşluğu varsa, iki öğe arasındaki kenar boşluğu 50 piksel yerine 30 piksel olacaktır. Bu sol / sağ kenar boşluğu veya dolgu için geçerli değildir.

Kenar boşluğu, öğenizin dışına uygulanır, böylece öğenizin diğer öğelerden ne kadar uzakta olduğu etkilenir.

Doldurma, öğenizin içine uygulanır, böylece öğenizin içeriğinin kenarlıktan ne kadar uzakta olduğunu etkiler.

Ayrıca, kenar boşluğu kullanmak öğenizin boyutlarını etkilemez, dolgu ise öğelerinizin boyutlarını ayarlayacaktır (yüksekliği + doldurmayı ayarlayın), bu nedenle örneğin 5 piksel dolgulu 100x100 piksel bir div'iniz varsa div'iniz 105x105 piksel olacaktır

Bu 3 noktayı hatırlayın:

• Marj, kontrolün etrafındaki ekstra alandır .
• Dolgu, kontrolün içinde fazladan bir boşluktur .
• Bir doldurma , bir dış kontrol, bir iç kontrol marjı ise .

Demo Görüntü: (burada kırmızı kutu arzu kontrolüdür)

En basit defenisyon; dolgu, konteyner elemanının sınırının içinde verilen bir boşluktur ve dış kenar boşluğu verilir. Bir kap olmayan bir eleman için, dolgu pek mantıklı olmayabilir, ancak marj defenitly onu düzenlemeye yardımcı olacaktır.

Dolgu kenarlık içindeki boşluk iken, Kenar Boşluğu sınır dışındaki boşluktur .

Dolgu malzemesi

Dolgu öğesi, bir öğe içeriği ile kenarlığı arasındaki boşluğu (kenarlığı varsa) tanımlayan bir CSS özelliğidir. Bir öğenin çevresinde bir kenarlık varsa, dolgu, bu kenarlıktan o kenarlıkta görünen öğe içeriğine alan verir. Bir öğenin etrafında kenarlık yoksa, boşluk ekleyecek kenarlık olmadığından dolgu eklemenin bu öğe üzerinde hiçbir etkisi yoktur.

kenar

Kenar boşluğu, bir öğenin dışındaki alanı bir sonraki dış öğeye tanımlayan bir CSS özelliğidir.

Marj, her ikisinin de kenarlığı olan veya olmayan öğeleri etkiler. Bir öğenin kenarlığı varsa, kenar boşluğu bu kenarlıktan sonraki dış öğeye kadar olan alanı tanımlar. Bir öğenin kenarlığı yoksa, kenar boşluğu öğe içeriğinden sonraki dış öğeye kadar olan alanı tanımlar.

Dolgu ve Kenar Boşluğu Arasındaki Fark

Dolayısıyla, kenar boşluğu ve dolgu arasındaki fark, dolgu iç mekanla ilgilenirken, kenar boşluğunun bir sonraki dış elemanın dış uzayıyla ilgilenmesidir.

Kenar boşluğu ve dolgu arasındaki temel farklardan biri, yanıtların hiçbirinde belirtilmez: tıklanabilirlik ve fareyle üzerine gelme algılama

Dolguyu arttırmak elemanın etkili boyutunu arttırır. Bazen gözle görülür şekilde büyütmek istemediğim ufacık bir simgeye sahibim, ancak kullanıcının hala bu simgeyle etkileşime girmesi gerekiyor. Simgenin dolgusunu, tıklamalar ve fareyle üzerine gelindiğinde daha fazla yer kaplaması için artırıyorum. Simgenin kenar boşluğunu artırmak aynı etkiye sahip olmayacaktır.

Bu konuyla ilgili başka bir sorunun cevabı bir örnek verir.

margin = elemanın kenarlıktan dışa doğru (dış) alanı.

padding = öğenin metinden kenarlığa (boşluk) çevresindeki boşluk.

buraya bakın: http://jsfiddle.net/robx/GaMpq/

marginVe arasındaki farkları bilmek iyidir padding. Bildiğim gibi:

• Kenar boşluğu , bir öğenin dış alanı iken dolgu, bir öğenin iç alanıdır . Diğer bir deyişle, kenar boşluğu bir öğenin kenarlığının dışındaki boşluktur, dolgu ise kenarlığının içindeki boşluktur.
• autoKenar boşluğuna değer ayarlayabilirsiniz . Ancak, dolgu için izin verilmez. Şuna bakın .
  Not: Kullanım margin: autoyatay kendi üst içinde bir blok elemanı ortalamak için. Ayrıca, kenar boşluğunu otomatik olarak ayarlayarak bir öğeyi bir esnek kutunun içinde dikey veya yatay olarak veya her ikisini birden ortalamak mümkündür. Şuna bakın .
• Marj herhangi bir kayan sayı olabilir, ancak dolgu negatif olmamalıdır.
• Bir öğeye stil eklediğinizde, dolgu da şekillendirilir; ama marj değil. Kenar boşluğu, üst öğenin stilini alır. Örneğin, background-colorözelliği siyah olarak ayarladığınızda, iç alanı (ör. Dolgu) siyah olur, ancak dış alanı (kenar boşluğu) olmaz.

Marj , kutunun dışında kalan boşluktur; dolgu kutunun içindeki alandır. Farkı beyaz bir dolgu ile görmek zor, ancak renkli bir dolgu ile iyi görebilirsiniz.

Kenar boşluğu ve dolgu her iki dolgu türüdür ... Bir (kenar boşluğu), diğer öğelerden uzaklaştırmak için öğeler kenarlığının dışına gider ve diğeri (dolgu), öğeleri öğeler kenarlığından uzaklaştırmak için öğeler içeriğinin dışına gider.

Dolgu, geliştiricinin metin ile onu çevreleyen öğe arasındaki boşluğu korumasına olanak tanır. Kenar boşluğu, öğenin üst DOM öğesinin başka bir öğesiyle koruduğu alandır.

Örneğe bakın:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UT-8">
    <title>Pseudo Elements</title>
    <style type="text/css">
        body{font-family:Arial; font-size:16px; background-color:#f8e6ae; color:#888;}
        .page
        {
            background-color: #fff;
            padding: 10px 30px 50px 50px;
            margin:30px 100px 30px 300px;
        }
    </style>
</head>
<body>
    <div class="page">
        Notice the distance between the top and this text. Then compare it with the distance between the bottom border and the this text. 
    </div>
</body>

kenar , CSS'de, öğelerin etrafında, kenarlığın dışında boşluk oluşturmak için kullanılan bir özelliktir. Programcı üst, sağ, alt ve sol kenar boşluğunu ayarlayabilir. Başka bir deyişle, bu değerleri kenar boşluğu, kenar boşluğu, kenar boşluğu ve kenar boşluğu kullanarak ayarlayabilir.

Marj değerleri aşağıdaki türlerden olabilir.

İlk olarak, auto, tarayıcının marjı hesaplamasını sağlar. Dahası, uzunluk, piksel, pt veya cm cinsinden bir kenar boşluğunu belirtirken%, bir kenar boşluğunu içeren elemanın genişliğine göre yüzde olarak tanımlamaya yardımcı olur. Son olarak, miras, kenar boşluğunun üst öğeden miras alınması gerektiğini belirtir.

Dolgu , CSS'de kenarlığın içindeki bir öğenin etrafında boşluk oluşturmaya yardımcı olan bir özelliktir. Programcı dolgu için üst, sağ, alt ve sol ayarları yapabilir. Başka bir deyişle, bu değerleri dolgu üst, dolgu sağ, dolgu alt ve dolgu solunu kullanarak ayarlayabilir.

Dolgu değerleri aşağıdaki türlerden olabilir.

Uzunluk, dolguyu px, pt veya cm cinsinden tanımlar,% ise dolguyu içerdiği elemanın genişliğine göre yüzde olarak belirtir. Son olarak, miras doldurmanın ana elemandan miras alınması gerektiğini açıklar.

 div.special {
          width:200px; 
          border-style: solid; 
          border-width:thin; 
          border-color:#000;
          margin:30px 20px 10px 25px;
}     
div.special2 {
          width:200px;
          border-style: solid;
          border-width:thin;
          border-color:#000;
          padding:30px 20px 10px 25px;
}        

<div class="special">
             Hello its margin test 
</div>
<div class="special2">
            Hello its padding test
</div>

Marj ve Dolgu Arasındaki Fark

Kenar boşluğu , tanımlanan kenarlığın dışında öğenin etrafında boşluk oluşturmak için kullanılan bir CSS özelliğidir, dolgu ise tanımlanan kenarlığın içinde öğenin etrafında boşluk oluşturmak için kullanılan bir CSS özelliğidir. Böylece bu, marj ve dolgu arasındaki ana farkı açıklar.

Değerler Ayrıca, kenar boşluğu değerleri otomatik, uzunluk,% veya devralma olabilir, dolgu değerleri ise uzunluk,% veya devralma türü olabilir. Bu nedenle, bu marj ve dolgu arasındaki bir başka farktır.

Kısacası, kenar boşluğu ve dolgu , CSS'de web sayfalarını şekillendirmeye izin veren iki özelliktir. Bu özellikler için negatif değerler atamak mümkün değildir. Kenar boşluğu ve dolgu arasındaki temel fark, kenar boşluğunun kenarlığın dışındaki öğenin etrafında boşluk oluşturmasına yardımcı olurken dolgu, kenarlığın içindeki öğenin etrafında boşluk oluşturulmasına yardımcı olur.

Genişlik ve yükseklikte blok div'a arka plan rengi koymayı deneyin. Dolgunun öğenin boyutunu artırdığını görürsünüz, kenar boşluğu ise belgenin akışı içinde hareket ettirir.

Marj, özellikle elemanın yerini değiştirmek içindir.

Dolgu, web sayfasındaki en yakın bileşenler arasındaki boşluktur ve kenar boşluğu web sayfasının kenar boşluğundan kalan alandır.

Bir şey fark ettim ama yukarıdaki cevapların hiçbiri belirtilmedi. Boş iç html içeriğiyle başlatılan dinamik olarak oluşturulmuş bir DOM öğem varsa, bu boş öğenin içeriği dışında herhangi bir alan işgal etmesini istemiyorsanız dolgu yerine kenar boşluğu kullanmak iyi bir uygulamadır.

Önemli bir fark var:

Kenar boşluğu elemanın dışındadır, yani eleman başladıktan sonra "boşluk" vardiyası uygulanır. Doldurma - içeride, diğeri ise eleman başlamadan önce "boşluk" olan boşlukları uygular.

Marj, öğenizin dışına uygulanır, böylece öğenizin diğer öğelerden ne kadar uzakta olduğunu etkiler.

Doldurma, öğenizin içine uygulanır, böylece öğenizin içeriğinin kenarlıktan ne kadar uzakta olduğunu etkiler.

Ayrıca, kenar boşluğu kullanmak öğenizin boyutlarını etkilemez, dolgu ise öğelerinizin boyutlarını ayarlayacaktır (yüksekliği + doldurmayı ayarlayın), bu nedenle örneğin 5 piksel dolgulu 100x100 piksel bir div'iniz varsa div'iniz 105x105 piksel olacaktır

Temel olarak, dolgu ve kenar boşluğu arasındaki fark arka plan açısından gelir. Dolgu, içerik arasındaki boşluğa karar verirken, kenar boşluğu öğelerin dış kenarına karar verir!

Dolgu, içerik ve sınır arasındaki boşluktur. Marjı arasındaki boşluk nerede olduğu sınır ve diğer eleman.