CSS'de marj vs padding kullan─▒ld─▒─č─▒nda [kapal─▒]


Al─▒nan cevaba git


CSS yazarken, ne zaman margin ve ne zaman kullan─▒laca─č─▒na karar verirken kullan─▒lmas─▒ gereken belirli bir kural veya k─▒lavuz var padding m─▒?


2251









Cevap say─▒s─▒n─▒ say: 16






TL; DR: Varsay─▒lan olarak kenarl─▒k veya arka plana sahip oldu─čum ve g├Âr├╝n├╝r kutu i├žindeki bo┼člu─ču art─▒rmak istemedi─čim durumlar d─▒┼č─▒nda her yerde kenar bo┼člu─ču kullan─▒yorum.

Bana g├Âre, doldurma ve kenar bo┼člu─ču aras─▒ndaki en b├╝y├╝k fark, dikey kenar bo┼čluklar─▒n─▒n otomatik olarak daralt─▒lmas─▒ ve dolgunlu─čun olmamas─▒d─▒r.

Birbirinin ├╝st├╝nde iki eleman─▒n dolgulu olarak d├╝┼č├╝n├╝n 1em . Bu dolgu, eleman─▒n bir par├žas─▒ olarak kabul edilir ve daima korunur.

B├Âylece, ilk eleman─▒n i├žeri─čini, ard─▒ndan ilk eleman─▒n dolgusunu, ard─▒ndan ikincinin dolgusunu ve ard─▒ndan ikinci eleman─▒n i├žeri─čini takip edersiniz.

B├Âylece iki elementin i├žeri─či ayr─▒ kalmaya ba┼člayacak 2em .

┼×imdi bu dolguyu 1em marj ile de─či┼čtirin. Kenar bo┼čluklar─▒ ├Â─čenin d─▒┼č─▒nda say─▒l─▒r ve biti┼čik ├Â─čelerin kenar bo┼čluklar─▒ ├Ârt├╝┼č├╝r.

B├Âylece, bu ├Ârnekte, ilk eleman─▒n i├žeri─či, ard─▒ndan 1em kombine marj─▒n ard─▒ndan ikinci eleman─▒n i├žeri─či ile sonu├žlanacaks─▒n─▒z. Yani iki elementin i├žeri─či sadece 1em ayr─▒d─▒r.

Bu 1em , yan─▒ndaki ├Â─čeye bak─▒lmaks─▒z─▒n, bir ├Â─čenin etraf─▒ndaki bo┼čluktan bahsetmek istedi─činizi bildi─činizde ger├žekten yararl─▒ olabilir .

Di─čer iki b├╝y├╝k fark, dolgunlu─čun t─▒klama b├Âlgesine ve arka plan rengine / g├Âr├╝nt├╝s├╝ne dahil oldu─ču, ancak kenar bo┼člu─čunun olmad─▒─č─▒d─▒r.


1493







Kenar bo┼člu─ču blok dolgu i├žindeyken blok elemanlar─▒n d─▒┼č─▒ndad─▒r.

  • Blo─ču d─▒┼č─▒ndakilerden ay─▒rmak i├žin marj kullan─▒n
  • ─░├žeri─či blo─čun kenarlar─▒ndan uza─ča ta┼č─▒mak i├žin dolgu kullan─▒n.


g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin


1457







Bunu ├Ârneklerle, diyagramlarla ve hatta 'kendin dene' g├Âr├╝┼č├╝ ile a├ž─▒klarken g├Ârd├╝─č├╝m en iyisi burada .

A┼ča─č─▒daki diyagram, fark─▒n an─▒nda g├Ârsel olarak anla┼č─▒lmas─▒n─▒ sa─člar.


g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin

Ak─▒lda tutulmas─▒ gereken bir ┼čey standartlara uygun taray─▒c─▒lar ( IE ilgin├ž bir istisnad─▒r ) sadece verilen geni┼čli─če i├žerik k─▒sm─▒ yapar, bu nedenle d├╝zen hesaplamalar─▒nda bunu takip edin. Ayr─▒ca kenarl─▒k kutusunun, Bootstrap 3 ile onu destekleyen bir d├Ân├╝┼č g├Ârd├╝─č├╝n├╝ unutmay─▒n .


569







Sorunuz i├žin daha teknik a├ž─▒klamalar var, ancak ne zaman ve nas─▒l kullanaca─č─▒n─▒z─▒ se├žmenize yard─▒mc─▒ olacak kenar bo┼člu─ču ve dolgusu hakk─▒nda d├╝┼č├╝nmenin bir yolunu ar─▒yorsan─▒z , bu yard─▒mc─▒ olabilir.

Blok elemanlar─▒n─▒ duvara as─▒l─▒ resimlerle kar┼č─▒la┼čt─▒r─▒n:

  • Taray─▒c─▒ penceresi sadece duvara gibidir.
  • ─░├žerik sadece bir foto─čraf gibidir.
  • Marj─▒ sadece ├žer├ževeli resim aras─▒ndaki duvar alan─▒ gibidir.
  • Dolgu sadece bir foto─čraf etraf─▒nda paspas gibidir.
  • S─▒n─▒r sadece ├žer├ževe ├╝zerinde s─▒n─▒r─▒nda gibidir.

Kenar bo┼člu─ču ve dolgusu aras─▒nda karar verirken, bir ├Â─čeyi duvardaki di─čer ┼čeylerle ili┼čki i├žinde konumland─▒r─▒rken kenar bo┼člu─čunu kullanmak g├╝zel bir kurald─▒r ve ├Â─čenin kendisinin g├Âr├╝n├╝m├╝n├╝ ayarlarken dolguyu kullanmak g├╝zel bir kurald─▒r . Kenar bo┼člu─ču ├Â─čenin boyutunu de─či┼čtirmez, ancak dolgu ├Â─česi ├Â─čeyi 1 daha b├╝y├╝k hale getirir .

1 Bu varsay─▒lan kutu modeli box-sizing ├Âznitelik ile de─či┼čtirilebilir .


88







MARGIN vs PADDING :

  1. Kenar bo┼člu─ču, bir ├Â─če i├žinde o ├Â─če ile sayfan─▒n di─čer ├Â─čeleri aras─▒nda mesafe olu┼čturmak i├žin kullan─▒l─▒r. Dolgu ├Â─česinin i├žeri─či ve kenarl─▒─č─▒ aras─▒nda mesafe olu┼čturmak i├žin kullan─▒ld─▒─č─▒nda.

  2. Kenar bo┼člu─ču, dolgunun eleman─▒n par├žas─▒ oldu─ču bir eleman─▒n par├žas─▒ de─čildir.

L├╝tfen Marjin Vs Padding - CSS Properties'den ├ž─▒kar─▒lan resme bak─▒n.http://www.digizol.com/2006/12/margin-vs-padding-css-properties.html


Marj vs Dolgu


82







G├Ânderen https://www.w3schools.com/css/css_boxmodel.asp

Farkl─▒ par├žalar─▒n a├ž─▒klamas─▒:

  • ─░├žerik - Metin ve g├Âr├╝nt├╝lerin g├Âr├╝nd├╝─č├╝ kutunun i├žeri─či

  • Dolgu - ─░├žeri─čin etraf─▒ndaki alan─▒ temizler. Dolgu ┼čeffaf

  • Kenarl─▒k - Dolgu ve i├žeri─čin etraf─▒ndan ge├žen bir kenarl─▒k

  • Marj - S─▒n─▒r─▒n d─▒┼č─▒ndaki bir alan─▒ temizler. Kenar bo┼člu─ču ┼čeffaft─▒r


CSS kutu modelinin resmi

Canl─▒ ├Ârnek (de─čerleri de─či┼čtirerek oynay─▒n): https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel


41







─░┼čte nas─▒l kullan─▒laca─č─▒n─▒ g├Âsterir baz─▒ HTML padding ve margin Clickability etkiler ve arka plan dolumu. Bir nesne, dolgusu i├žin t─▒klamalar al─▒r, ancak kenar bo┼člu─ču alan bir nesneye yap─▒lan t─▒klamalar ├╝st ├Â─česine gider.

 $(".outer").click(function(e) {
  console.log("outer");
  e.stopPropagation();
});

$(".inner").click(function(e) {
  console.log("inner");
  e.stopPropagation();
}); 
 .outer {
  padding: 10px;
  background: red;
}

.inner {
  margin: 10px;
  padding: 10px;
  background: blue;
  border: solid white 1px;
} 
 <script src="http://code.jquery.com/jquery-latest.js"></script>

<div class="outer">
  <div class="inner" style="position:relative; height:0px; width:0px">

  </div>
</div> 


33







Kenar bo┼čluklar─▒ ile ilgili olan ┼čey, elementin geni┼čli─či hakk─▒nda endi┼čelenmenize gerek olmamas─▒d─▒r.

Bir ┼čey verdi─činizde oldu─ču gibi , ' formda ' kalmak ve etraf─▒ndaki di─čer unsurlar─▒ rahats─▒z etmemek {padding: 10px;} i├žin elementin geni┼čli─čini 20 piksel kadar azaltmak zorunda kalacaks─▒n─▒z .

Bu y├╝zden genellikle ' packed ' her ┼čeyi elde etmek i├žin dolguyu kullanarak ba┼člar─▒m ve sonra k├╝├ž├╝k titremeler i├žin kenar bo┼čluklar─▒ kullan─▒yorum.

Dikkat edilmesi gereken bir ba┼čka ┼čey de, dolgular─▒n farkl─▒ taray─▒c─▒larda daha tutarl─▒ olmas─▒ ve IE'nin negatif marjlar─▒ ├žok iyi i┼člememesidir.


31







Kenar bo┼člu─ču bir ├Â─čenin etraf─▒ndaki bir alan─▒ (kenarl─▒─č─▒n d─▒┼č─▒nda) temizler, ancak dolgu maddesi bir ├Â─čenin i├žeri─či (kenarl─▒─č─▒n i├žindeki) etraf─▒ndaki bir alan─▒ temizler.


g├Âr├╝nt├╝ tan─▒m─▒n─▒ buraya girin

Bu, ├Â─čenizin d─▒┼č kenar bo┼čluklar─▒n─▒ bilmedi─či anlam─▒na gelir; bu nedenle, dinamik web denetimleri geli┼čtiriyorsan─▒z, e─čer m├╝mk├╝nse dolguyu vs kenar bo┼člu─čunu kullanman─▒z─▒ ├Âneririm.

Baz─▒ durumlarda kenar bo┼člu─ču kullanman─▒z gerekti─čini unutmay─▒n.


27







Unutulmamas─▒ gereken bir ┼čey, otomatik olarak daralt─▒lan kenar bo┼čluklar─▒n─▒n sizi sinirlendirmesidir (ve ├Â─čelerinizde arka plan renklerini kullanm─▒yorsan─▒z), dolgu kullanmak daha kolay bir ┼čeydir.


18


2010-02-03





margin Ve aras─▒ndaki farklar─▒ bilmek iyidir padding . ─░┼čte baz─▒ farkl─▒l─▒klar:

  • Kenar bo┼člu─ču bir eleman─▒n d─▒┼č alan─▒d─▒r , dolgu ise bir eleman─▒n i├ž alan─▒d─▒r .

  • Kenar bo┼člu─ču, bir eleman─▒n s─▒n─▒r─▒n─▒n d─▒┼č─▒ndaki aland─▒r, dolgu ise s─▒n─▒r─▒n i├žindeki aland─▒r.

  • Kenar bo┼člu─ču, auto de─čerini kabul eder: margin: auto ancak dolguyu otomatik olarak ayarlayamazs─▒n─▒z.

  • Kenar bo┼člu─ču herhangi bir say─▒ya ayarlanabilir, ancak dolgu negatif olmamal─▒d─▒r.

  • Bir ├Â─čeye stil verdi─činizde, dolgu da etkilenir (├Ârne─čin arka plan rengi), ancak kenar bo┼člu─ču olmaz.


18







Geli┼čmi┼č Kenar Bo┼člu─ču ve Dolgu A├ž─▒klamas─▒

Bir padding ├Â─čedeki i├žeri─či bo┼čluk olarak kullanmak uygun de─čildir ; E─čer gerekir yararlanmak margin ├╝zerinde alt ├Â─če yerine. Internet Explorer gibi daha eski taray─▒c─▒lar margin , Internet Explorer 4'te m├╝kemmel ┼čekilde ├žal─▒┼čanlar─▒n kullan─▒m─▒ haricinde, kutu modelini yanl─▒┼č yorumlad─▒ .

Kullan─▒larak iki istisnas─▒ vard─▒r padding oldu─čunu kullan─▒m─▒na uygun:

  1. Bu bir sat─▒r i├ži eleman─▒na uygulanan olamaz , bir giri┼č eleman─▒ olarak bir alt ├Â─čeleri i├žerir.

  2. Bir sat─▒c─▒n─▒n * ├Âks├╝r├╝─č├╝ * Mozilla * ├Âks├╝r├╝─č├╝ * d├╝zeltmeyi reddetti─či ve kesin bir ┼čekilde ├žal─▒┼čt─▒─č─▒ (W3C ve WHATWG edit├Ârleriyle d├╝zenli al─▒┼čveri┼čler yapt─▒─č─▒n─▒z ├Âl├ž├╝de) ├žal─▒┼čan bir ├ž├Âz├╝m ve bu ├ž├Âz├╝me sahip olman─▒z gerekti─či konusunda ├žok ├že┼čitli taray─▒c─▒ hatalar─▒n─▒ telafi ediyorsunuz. telafi etti─činiz hatadan sonra ba┼čka hi├žbir ┼čeyin stilini etkilemeyecektir.

% 100 geni┼čli─če sahip bir elementiniz oldu─čunda padding: 50px; etkili bir ┼čekilde yan─▒n─▒zda width: calc(100% + 100px); . Yana margin olan de─čil eklenen width beklenmedik d├╝zeni sorunlar─▒na neden Kullanmad─▒─č─▒n─▒z zaman margin ├╝zerinde child elements yerine padding eleman─▒ do─črudan.

E─čer konum e─čer ├Âyleyse de─čil mi bu iki ┼čeyden birini yaparak de─čil elemana ama buna dolgu eklemek sen alacaks─▒n sa─člamak i├žin do─črudan ├žocuk / ├žocuklar eleman (lar) var beklenen davran─▒┼č─▒ t├╝m taray─▒c─▒larda.


15


2015-12-29





├ľncelikle farkl─▒l─▒klar─▒n ne oldu─čuna ve her sorumlulu─čun ne oldu─čuna bakal─▒m:

1) Marj

CSS marj ├Âzellikleri, elemanlar─▒n etraf─▒nda bo┼čluk olu┼čturmak i├žin kullan─▒l─▒r.
Kenar bo┼člu─ču ├Âzellikleri, s─▒n─▒r─▒n d─▒┼č─▒ndaki beyaz bo┼člu─čun boyutunu belirler. CSS ile, kenar bo┼čluklar─▒ ├╝zerinde tam kontrol sizde olur.
Bir eleman─▒n her bir taraf─▒ i├žin kenar bo┼člu─čunu ayarlamak i├žin CSS ├Âzellikleri vard─▒r (├╝st, sa─č, alt ve sol).


2) Dolgu

CSS dolum ├Âzellikleri, i├žerik ├ževresinde bo┼čluk olu┼čturmak i├žin kullan─▒l─▒r.
Dolgu, bir eleman─▒n i├žeri─či etraf─▒ndaki (kenarl─▒─č─▒n i├žinde) bir alan─▒ temizler.
CSS ile dolgu ├╝zerinde tam kontrol sizde. Bir eleman─▒n her bir taraf─▒ndaki dolguyu ayarlamak i├žin CSS ├Âzellikleri vard─▒r (├╝st, sa─č, alt ve sol).

Yani basit├že Kenar Bo┼čluklar─▒ elemanlar─▒n etraf─▒ndaki bo┼čluktur, Dolgu ise eleman─▒n par├žas─▒ olan i├žerik etraf─▒ndaki bo┼čluktur.


Kenar Bo┼člu─ču ve Dolgu

Kodlay─▒c─▒lardan gelen bu g├Âr├╝nt├╝, s─▒n─▒r ve s─▒n─▒rlar─▒n nas─▒l birle┼čti─čini ve s─▒n─▒r kutusunun ve i├žerik kutusunun onu nas─▒l farkl─▒la┼čt─▒rd─▒─č─▒n─▒ g├Âsterir.

Ayr─▒ca her b├Âl├╝m├╝ a┼ča─č─▒daki gibi tan─▒mlarlar:

  • ─░├žerik - bu, metin, g├Âr├╝nt├╝ler veya di─čer ├Â─čeler gibi as─▒l i├žeri─čin bulundu─ču kutunun i├žerik alan─▒n─▒ tan─▒mlar.
  • Dolgu - bu ana i├žeri─či i├žerdi─či kutudan temizler.
  • Kenarl─▒k - bu hem i├žeri─či hem de dolguyu ├ževreler.
  • Marj - bu alan onu di─čer elemanlardan ay─▒ran ┼čeffaf bir alan tan─▒mlar.

14







Her zaman bu prensibi kullan─▒r─▒m:


kutu model resmi

Bu, FirefoxÔÇÖtaki inceleme ├Â─česi ├Âzelli─činden kutu modelidir. Bir so─čan gibi ├žal─▒┼č─▒r:

  • ─░├žeri─činiz ortada.
  • Dolgu, i├žeri─činiz ile i├žinde bulundu─ču etiketin kenar─▒ aras─▒ndaki bo┼čluktur.
  • S─▒n─▒r ve ├Âzellikleri
  • Kenar bo┼člu─ču etiketin etraf─▒ndaki aland─▒r.

B├Âylece daha b├╝y├╝k kenar bo┼čluklar─▒ i├žeri─činizi i├žeren kutunun ├ževresinde daha fazla yer a├žacakt─▒r.

Daha b├╝y├╝k dolgu maddesi, i├žeri─činiz ile i├žinde bulundu─ču kutu aras─▒ndaki bo┼člu─ču art─▒racakt─▒r.

Belirli bir de─čere ayarlanm─▒┼čsa, hi├žbiri kutunun boyutunu b├╝y├╝tmez veya d├╝┼č├╝rmez.


8







kenar

Kenar bo┼člu─ču genellikle ├Â─čenin kendisi ve ├ževresi aras─▒nda bir bo┼čluk olu┼čturmak i├žin kullan─▒l─▒r.

├Ârne─čin, ekran─▒n kenarlar─▒na yap─▒┼čmas─▒n─▒ sa─člamak ve beyaz bo┼čluk b─▒rakmamak i├žin bir navbar in┼ča ederken kullan─▒yorum.

Dolgu malzemesi

Genellikle bir s─▒n─▒r─▒n i├žindeki bir ├Â─čem oldu─čunda <div> veya benzer bir ┼čey kulland─▒─č─▒mda kullan─▒r─▒m ve boyutunu k├╝├ž├╝ltmek isterim ama o s─▒rada etraf─▒ndaki di─čer ├Â─čeler aras─▒ndaki mesafeyi veya kenar bo┼člu─čunu korumak istiyorum.

Yani k─▒saca, durumsal; ne yapmaya ├žal─▒┼čt─▒─č─▒n─▒za ba─čl─▒.


6







Kenar bo┼člu─ču kutunun d─▒┼č─▒nda ve doldurma kutunun i├žindedir


1



─░lgili yay─▒nlar


IMG ve CSS arka plan g├Âr├╝nt├╝s├╝ ne zaman kullan─▒l─▒r?

─░kilem: Fragments vs Activities kullan─▒ld─▒─č─▒nda:

LINQ: SingleOrDefault vs. FirstOrDefault () filtreleme ├Âl├ž├╝tleriyle ne zaman kullan─▒l─▒r?

Dinamik ve statik kitapl─▒klar ne zaman kullan─▒l─▒r?

─░┼čaret├žiler ve referanslar ne zaman kullan─▒l─▒r?

NSInteger vs. int ne zaman kullan─▒l─▒r?

SetAttribute vs .attribute = JavaScript'te ne zaman kullan─▒l─▒r?

CSS'de! ─░mportant ├Âzelli─čini ne zaman kullanmal─▒ [duplicate]

Global.asax'ta Application_Start vs Init ne zaman kullan─▒l─▒r?

<p> vs. <br> [kapal─▒] ne zaman kullan─▒l─▒r

Etiketle ilgili di─čer sorular [css]


Metni dikey olarak CSS ile nas─▒l ortalayabilirim? [├žift]

HTML'de g├Âr├╝nt├╝lemek i├žin hangi karakterler yukar─▒ / a┼ča─č─▒ ├╝├žgen (k├Âks├╝z ok) i├žin kullan─▒labilir?

Kayd─▒rma ├žubu─čunu gizle, ancak yine de kayd─▒rma yapabilirken

Venv, pyvenv, pyenv, virtualenv, virtualenvwrapper, pipenv vb. Aras─▒ndaki fark nedir?

TINYTEXT, TEXT, MEDIUMTEXT ve LONGTEXT maksimum saklama boyutlar─▒

Python'da bir dizgideki t├╝m bo┼čluklar─▒ kald─▒r

Hangisi daha h─▒zl─▒: s├╝re (1) veya s├╝re (2)?

Hangi algoritmalar haritada A noktas─▒ndan B noktas─▒na y├Ânleri hesaplar?

Printf, dizgede yeni bir sat─▒r olmad─▒k├ža ├ža─čr─▒dan sonra neden d├╝zle┼čmiyor?

Konteyner s─▒v─▒s─▒ vs .container