CSS හි ආන්තික එදිරිව පෑඩින් භාවිතා කරන විට [වසා ඇත]

CSS ලිවීමේදී, භාවිතා කළ යුත්තේ කවදාද marginසහ කවදාද යන්න තීරණය කිරීමේදී භාවිතා කළ යුතු විශේෂිත රීතියක් හෝ මාර්ගෝපදේශයක් paddingතිබේද?

ටීඑල්; ඩීආර්: මායිමක් හෝ පසුබිමක් ඇති විට සහ එම දෘශ්‍ය කොටුව තුළ ඇති ඉඩ ප්‍රමාණය වැඩි කිරීමට අවශ්‍ය විට හැර පෙරනිමියෙන් මම සෑම තැනකම ආන්තිකය භාවිතා කරමි.

මට නම්, පෑඩින් කිරීම සහ ආන්තිකය අතර ඇති විශාලතම වෙනස වන්නේ සිරස් ආන්තිකයන් ස්වයංක්‍රීයව බිඳවැටීමයි.

පැඩින් කිරීම සමඟ මූලද්‍රව්‍ය දෙකක් එකිනෙකට ඉහළින් සලකා බලන්න 1em. මෙම පෑඩින් කිරීම මූලද්රව්යයේ කොටසක් ලෙස සලකනු ලබන අතර සෑම විටම සංරක්ෂණය කර ඇත.

එබැවින් ඔබ පළමු මූලද්රව්යයේ අන්තර්ගතයත්, පසුව පළමු මූලද්රව්යයේ පෑඩින් කිරීමත්, දෙවන පෑඩින් කිරීමත්, දෙවන මූලද්රව්යයේ අන්තර්ගතයත් සමඟ අවසන් වනු ඇත.

මේ අනුව මූලද්‍රව්‍ය දෙකේ අන්තර්ගතය 2emවෙන්ව පවතිනු ඇත .

දැන් එම පෑඩින් 1em ආන්තිකයෙන් ආදේශ කරන්න. ආන්තිකය මූලද්‍රව්‍යයෙන් පිටත යැයි සැලකේ, යාබද අයිතමවල ආන්තිකය අතිච්ඡාදනය වේ.

එබැවින් මෙම උදාහරණයේ දී, ඔබ පළමු මූලද්‍රව්‍යයේ අන්තර්ගතයෙන් පසුව 1emඒකාබද්ධ ආන්තිකයෙන් පසුව දෙවන මූලද්‍රව්‍යයේ අන්තර්ගතයෙන් අවසන් වේ. එබැවින් මූලද්රව්ය දෙකේ අන්තර්ගතය 1emවෙන්ව ඇත.

1emමූලද්‍රව්‍යයක් වටා ඇති පරතරය ගැන ඔබට පැවසීමට අවශ්‍ය බව ඔබ දැනගත් විට මෙය සැබවින්ම ප්‍රයෝජනවත් වේ .

අනෙක් විශාල වෙනස්කම් දෙක වන්නේ පැඩිං ක්ලික් කලාපයට සහ පසුබිම් වර්ණයට / රූපයට ඇතුළත් කර ඇති නමුත් ආන්තිකය නොවේ.

div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }
div.padding > div { padding-top: 20px; }
div.margin > div { margin-top: 20px; }

<h3>Default</h3>
<div class="box">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>padding-top: 20px</h3>
<div class="box padding">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>margin-top: 20px; </h3>
<div class="box margin">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

ආන්තිකය බ්ලොක් මූලද්‍රව්‍ය වලින් පිටත වන අතර පෑඩින් කිරීම ඇතුළත වේ.

• බ්ලොක් එක පිටත ඇති දේවලින් වෙන් කිරීමට ආන්තිකය භාවිතා කරන්න
• බ්ලොක් එකේ දාරවලින් අන්තර්ගතය ගෙනයාමට පෑඩින් භාවිතා කරන්න.

උදාහරණ, රූප සටහන් සහ 'ඔබම උත්සාහ කර බලන්න' යන දර්ශනය සමඟ මෙය පැහැදිලි කිරීම මා දැක ඇති හොඳම දේ මෙහි ඇත.

පහත රූප සටහන වෙනස පිළිබඳ ක්ෂණික දෘශ්‍ය අවබෝධයක් ලබා දෙයි.

මතක තබා ගත යුතු එක් දෙයක් නම් ප්‍රමිති අනුකූල බ්‍රව්සර් ( IE quirks යනු ව්‍යතිරේකයකි ) ලබා දී ඇති පළලට අන්තර්ගත කොටස පමණක් ලබා දෙන බැවින් පිරිසැලසුම් ගණනය කිරීම් වලදී මෙය නිරීක්ෂණය කරන්න. මායිම් පෙට්ටිය බූට්ස්ට්‍රැප් 3 සහය දක්වමින් යම් තරමක නැවත පැමිණීමක් දකින බව සලකන්න .

ඔබේ ප්‍රශ්නයට තවත් තාක්ෂණික පැහැදිලි කිරීම් තිබේ, නමුත් ඔබට ආන්තිකය සහ පෑඩින් ගැන සිතීමට ක්‍රමයක් අවශ්‍ය නම් , මෙම ප්‍රතිසමය උපකාරී වේ.

බිත්ති මත එල්ලෙන පින්තූර රාමු ලෙස බ්ලොක් මූලද්‍රව්‍ය ගැන සිතන්න:

• ඡායාරූපය යනු අන්තර්ගතයයි .
• පැදුරු යනු පැඩිං ය .
• රාමු අච්චුව යනු මායිමයි .
• බිත්තිය යනු දර්ශන පථයයි .
• රාමු දෙකක් අතර ඇති අවකාශය ආන්තිකයයි .

මෙය සිත්හි තබා, අතේ මාපට ඇඟිල්ල හොඳ පාලනය භාවිතා කිරීමයි ආන්තිකය අවකාශය කිරීමට බිත්තිය මත අනෙකුත් මූලද්රව්ය සමග ඇති සබඳතාවය මූලද්රව්යයක් සහ අවශ්ය විට පුරවන ඔබ අංගයක් ම පෙනුම අනුව සැකසූ සිටින විට. ආන්තිකය මූලද්‍රව්‍යයේ ප්‍රමාණය වෙනස් නොකරයි, නමුත් පෑඩින් කිරීම මඟින් මූලද්‍රව්‍යය ¹ විශාල කරයි.

¹ ඔබට මෙම හැසිරීම box-sizingගුණාංගය සමඟ වෙනස් කළ හැකිය .

මාජින් එදිරිව පැඩින් කිරීම :

1. එම මූලද්‍රව්‍යය සහ පිටුවේ අනෙකුත් අංග අතර දුරක් නිර්මාණය කිරීම සඳහා මූලද්‍රව්‍යයක ආන්තිකය භාවිතා කරයි. මූලද්‍රව්‍යයක අන්තර්ගතය සහ මායිම අතර දුරක් නිර්මාණය කිරීම සඳහා පෑඩින් කිරීම භාවිතා කරන තැන.

2. ආන්තිකය යනු පැඩින් කිරීම මූලද්‍රව්‍යයේ කොටසක් වන මූලද්‍රව්‍යයක කොටසක් නොවේ.

මාජින් Vs පැඩින් - CSS ගුණාංග වලින් ලබාගත් රූපය කරුණාකර පහත බලන්න

Https://www.w3schools.com/css/css_boxmodel.asp වෙතින්

විවිධ කොටස් පැහැදිලි කිරීම:

• අන්තර්ගතය - පෙළ සහ රූප දිස්වන කොටුවේ අන්තර්ගතය

• පැඩින් කිරීම - අන්තර්ගතය වටා ප්‍රදේශයක් ඉවත් කරයි. පෑඩින් විනිවිද පෙනෙන ය

• මායිම - පෑඩින් සහ අන්තර්ගතය වටා ගමන් කරන මායිමකි

• ආන්තිකය - දේශ සීමාවෙන් පිටත ප්‍රදේශයක් ඉවත් කරයි. ආන්තිකය විනිවිද පෙනෙන ය

සජීවී උදාහරණය (අගයන් වෙනස් කිරීමෙන් සෙල්ලම් කරන්න): https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

මෙතන කරන්නේ කෙසේද යන්න බව සමහර HTML වේ paddingහා marginclickability බලපාන, සහ පසුබිම් පිරවීම. වස්තුවකට එහි පැඩින් කිරීම සඳහා ක්ලික් කිරීම් ලැබෙනු ඇත, නමුත් වස්තූන් ආන්තික ප්‍රදේශයක් මත ක්ලික් කිරීම එහි මවුපියන් වෙත යයි.

$(".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>

ආන්තිකය පිළිබඳ කාරණය නම් මූලද්රව්යයේ පළල ගැන කරදර විය යුතු නැත.

ඔබ යමක් ලබා දෙන විට මෙන් {padding: 10px;}, ඔබට ' යෝග්‍යතාව ' තබා ගැනීමට සහ ඒ වටා ඇති අනෙකුත් මූලද්‍රව්‍යයන්ට බාධා නොකිරීමට මූලද්‍රව්‍යයේ පළල 20px කින් අඩු කිරීමට සිදුවේ .

ඒ නිසා මම සාමාන්‍යයෙන් ආරම්භ කරන්නේ සෑම දෙයක්ම ලබා ගැනීම packedසඳහා පෑඩින් භාවිතා කිරීමෙන් පසුව සුළු වෙනස් කිරීම් සඳහා ආන්තිකයන් භාවිතා කිරීමෙනි .

දැනුවත් විය යුතු තවත් දෙයක් නම්, විවිධ බ්‍රව්සර්වල පෑඩින් වඩාත් අනුකූල වන අතර IE negative ණ ආන්තිකයන්ට හොඳින් සලකන්නේ නැත.

ආන්තිකය මූලද්‍රව්‍යයක් වටා (දේශ සීමාවෙන් පිටත) ප්‍රදේශයක් ඉවත් කරයි, නමුත් පෑඩින් කිරීම මූලද්‍රව්‍යයක අන්තර්ගතය (මායිම ඇතුළත) වටා ඇති ප්‍රදේශයක් ඉවත් කරයි.

එයින් අදහස් වන්නේ ඔබේ මූලද්‍රව්‍යය එහි බාහිර ආන්තිකයන් ගැන නොදන්නා බවයි, එබැවින් ඔබ ගතික වෙබ් පාලක සංවර්ධනය කරන්නේ නම්, ඔබට හැකි නම් පැඩින් එදිරිව ආන්තිකය භාවිතා කිරීමට මම නිර්දේශ කරමි.

සමහර විට ඔබට ආන්තිකය භාවිතා කිරීමට සිදුවන බව සලකන්න.

marginසහ අතර ඇති වෙනස්කම් දැන ගැනීම හොඳය padding. මෙන්න වෙනස්කම් කිහිපයක්:

• ආන්තිකය යනු මූලද්‍රව්‍යයක පිටත අවකාශය වන අතර පෑඩින් කිරීම මූලද්‍රව්‍යයක අභ්‍යන්තර අවකාශයකි .

• ආන්තිකය යනු මූලද්‍රව්‍යයක මායිමෙන් පිටත ඇති අවකාශය වන අතර පෑඩින් කිරීම යනු එහි මායිම තුළ ඇති අවකාශයයි.

• මාජින් ස්වයංක්‍රීය අගය පිළිගනී:, margin: autoනමුත් ඔබට ස්වයංක්‍රීයව පෑඩින් සැකසිය නොහැක.

• ආන්තිකය ඕනෑම අංකයකට සැකසිය හැකි නමුත් පෑඩින් කිරීම .ණ නොවන විය යුතුය.

• ඔබ මූලද්‍රව්‍යයක් මෝස්තර කරන විට, පෑඩින් කිරීම ද බලපානු ඇත (උදා: පසුබිම් වර්ණය), නමුත් ආන්තිකය නොවේ.

සැලකිල්ලට ගත යුතු එක් දෙයක් නම් ස්වයංක්‍රීයව කඩා වැටෙන ආන්තිකයන් ඔබට කරදර කරන විට (සහ ඔබ ඔබේ මූලද්‍රව්‍යවල පසුබිම් වර්ණ භාවිතා නොකරයි), එය පෑඩින් කිරීම පහසුය.

උසස් ආන්තිකය හා පැඩින් විස්තර කිරීම

paddingමූලද්‍රව්‍යයක අභ්‍යවකාශ අන්තර්ගතය භාවිතා කිරීම නුසුදුසු ය ; ඔබ කළ යුතු යොදා marginමත ළමා අංගයක් වෙනුවට. ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 4 වැනි පැරණි බ්‍රව්සර් කොටු ආකෘතිය වැරදි ලෙස අර්ථකථනය කර ඇති අතර එය ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 4margin හි හොඳින් ක්‍රියාත්මක වන විට භාවිතා කරන විට හැර .

භාවිතා padding කිරීම සුදුසු වන විට ව්‍යතිරේක දෙකක් තිබේ :

1. ආදාන මූලද්‍රව්‍යයක් වැනි ළමා අංග අඩංගු විය නොහැකි පේළිගත මූලද්‍රව්‍යයකට එය යොදනු ලැබේ .

2. වෙළෙන්දෙකු * කැස්ස * මොසිල්ලා * කැස්ස * නිවැරදි කිරීම ප්‍රතික්ෂේප කරන සහ (ඔබ W3C සහ WHATWG සංස්කාරකවරුන් සමඟ නිරන්තර හුවමාරුවක් පවත්වන තරමට) ඔබට වැඩ කරන විසඳුමක් සහ මෙම විසඳුම තිබිය යුතු බවට විශ්වාස කරන ඉහළ විවිධ බ්‍රව්සර් දෝෂයකට ඔබ වන්දි ගෙවයි. ඔබ වන්දි ගෙවන දෝෂය වෙනත් කිසිවක් මෝස්තරයට බලපාන්නේ නැත.

ඔබ සමඟ 100% පළල මූලද්‍රව්‍යයක් ඇති padding: 50px;විට effectively ලදායී ලෙස ලබා ගන්න width: calc(100% + 100px);. සිට marginඇත නොහැකි එක් කිරීමට widthඔබ භාවිතා කරන විට එය අනපේක්ෂිත සැකැස්ම ගැටලු ඇති නොවන marginමත child elementsවෙනුවට paddingකොටස් කෙරෙහි සෘජුවම.

ඒ නිසා ඔබ කරන්නේ නම්, නෑ ඒ දේවල් දෙකක් නැහැ එක කරන්නේ නැහැ එම මූලද්රව්යය සඳහා පුරවන එකතු නමුත් එය කරන්නේ ද ලබා ගැනීමට යන්නේ ඔබ සහතික කිරීම සඳහා සෘජු දරුවාගේ / දරුවන්ගේ අංගයක් (ව) ය කිරීමට අපේක්ෂිත හැසිරීම් සියලු බ්රව්සර.

පළමුව අපි බලමු වෙනස්කම් මොනවාද සහ එක් එක් වගකීම කුමක්ද:

1) ආන්තිකය

මූලද්‍රව්‍ය වටා අවකාශය ජනනය කිරීම සඳහා CSS ආන්තික ගුණාංග භාවිතා කරයි.
ආන්තික ගුණාංග දේශ සීමාවෙන් පිටත සුදු අවකාශයේ ප්‍රමාණය නියම කරයි. CSS සමඟ, ඔබට ආන්තිකයන් පිළිබඳ පූර්ණ පාලනය ඇත.
මූලද්‍රව්‍යයක එක් එක් පැත්ත සඳහා ආන්තිකය සැකසීම සඳහා CSS ගුණාංග ඇත (ඉහළ, දකුණ, පහළ සහ වම).

2) පැඩින් කිරීම

අන්තර්ගතය වටා අවකාශය ජනනය කිරීම සඳහා CSS පෑඩින් ගුණාංග භාවිතා කරයි.
පෑඩින් කිරීම මූලද්‍රව්‍යයක අන්තර්ගතය (මායිම ඇතුළත) වටා ඇති ප්‍රදේශයක් ඉවත් කරයි.
CSS සමඟ, ඔබට පෑඩින් පාලනය කළ හැකිය. මූලද්‍රව්‍යයක එක් එක් පැත්තට (ඉහළ, දකුණ, පහළ සහ වමේ) පෑඩින් සැකසීම සඳහා CSS ගුණාංග ඇත.

එබැවින් සරලව මාජින් යනු මූලද්‍රව්‍ය වටා ඇති අවකාශයක් වන අතර පැඩින් කිරීම යනු මූලද්‍රව්‍යයේ කොටසක් වන අන්තර්ගතය වටා ඇති අවකාශයකි.

කේත රචකයන්ගේ මෙම පින්තූරය මඟින් ආන්තිකය සහ මායිම් එකිනෙකට වෙනස් වන්නේ කෙසේද සහ මායිම් පෙට්ටිය සහ අන්තර්ගත කොටුව වෙනස් වන්නේ කෙසේද යන්න පෙන්වයි.

තවද ඔවුන් එක් එක් කොටස පහත පරිදි අර්ථ දක්වයි:

• අන්තර්ගතය - පෙළ, රූප හෝ වෙනත් මූලද්‍රව්‍ය වැනි සත්‍ය අන්තර්ගතයන් වාසය කරන කොටුවේ අන්තර්ගත ප්‍රදේශය මෙය අර්ථ දක්වයි.
• පැඩින් කිරීම - මෙය එහි අඩංගු කොටුවෙන් ප්‍රධාන අන්තර්ගතය ඉවත් කරයි.
  
• මායිම - මෙය අන්තර්ගතය සහ පෑඩින් යන දෙකම වටා ඇත.
• ආන්තිකය - මෙම ප්‍රදේශය විනිවිද පෙනෙන අවකාශයක් වෙනත් මූලද්‍රව්‍යවලින් වෙන් කරයි.

මම සෑම විටම මෙම මූලධර්මය භාවිතා කරමි:

ෆයර්ෆොක්ස් හි පරීක්ෂා කිරීමේ මූලද්‍රව්‍ය අංගයේ කොටු ආකෘතිය මෙයයි. එය ලූනු මෙන් ක්‍රියා කරයි:

• ඔබගේ අන්තර්ගතය මැද ය.
• පැඩින් කිරීම යනු ඔබගේ අන්තර්ගතය සහ එහි ඇතුළත ඇති ටැගයේ මායිම අතර ඉඩකි.
• දේශ සීමාව සහ එහි පිරිවිතර
• ආන්තිකය යනු ටැගය වටා ඇති අවකාශයයි.

එබැවින් විශාල ආන්තිකයන් ඔබේ අන්තර්ගතය අඩංගු කොටුව වටා වැඩි ඉඩක් ලබා දෙනු ඇත.

විශාල පෑඩින් මඟින් ඔබේ අන්තර්ගතය සහ එහි ඇති කොටුව අතර ඉඩ ප්‍රමාණය වැඩි කරයි.

කොටුව නිශ්චිත අගයකට සකසා ඇත්නම් ඒවා දෙකම වැඩි කරන්නේ හෝ අඩු කරන්නේ නැත.

ආන්තිකය

ආන්තිකය සාමාන්‍යයෙන් භාවිතා වන්නේ මූලද්‍රව්‍යය සහ එහි වටපිටාව අතර අවකාශයක් නිර්මාණය කිරීමට ය.

උදාහරණයක් ලෙස මම නව්බාර් එකක් සාදන විට එය තිරයේ දාරවලට ඇලී ඇති අතර සුදු පරතරයක් නොමැතිව භාවිතා කරමි.

පෑඩින් කිරීම

මා සාමාන්‍යයෙන් භාවිතා කරන්නේ මායිමක් තුළ මූලද්‍රව්‍යයක් <div>හෝ ඊට සමාන දෙයක් ඇති විටය , එහි ප්‍රමාණය අඩු කිරීමට මට අවශ්‍ය නමුත් ඒ අවස්ථාවේ දී එය වටා ඇති අනෙක් මූලද්‍රව්‍ය අතර දුර හෝ ආන්තිකය තබා ගැනීමට මට අවශ්‍යය.

කෙටියෙන් කිවහොත් එය ස්ථානීය ය; එය රඳා පවතින්නේ ඔබ කිරීමට උත්සාහ කරන දේ මත ය.

මාජින් පෙට්ටියෙන් පිටත වන අතර පෙට්ටිය ඇතුළත පෑඩින් ඇත