เมื่อใดที่จะใช้ margin vs padding ใน CSS [ปิด]

เมื่อเขียน CSS มีกฎหรือแนวทางเฉพาะที่ควรใช้ในการตัดสินใจว่าจะใช้marginเมื่อไรและควรใช้เมื่อpaddingใด?

TL; DR: โดยปกติแล้วฉันจะใช้ระยะขอบทุกที่ยกเว้นเมื่อฉันมีเส้นขอบหรือพื้นหลังและต้องการเพิ่มพื้นที่ภายในกล่องที่มองเห็น

สำหรับฉันความแตกต่างที่ยิ่งใหญ่ที่สุดระหว่างการขยายและการเว้นระยะห่างคือระยะขอบแนวตั้งอัตโนมัติยุบและการขยายไม่ได้

พิจารณาสององค์ประกอบเหนือผู้อื่นแต่ละกับ padding 1emของ ช่องว่างภายในนี้ถือว่าเป็นส่วนหนึ่งขององค์ประกอบและได้รับการเก็บรักษาไว้เสมอ

ดังนั้นคุณจะจบลงด้วยเนื้อหาขององค์ประกอบแรกตามด้วยการเติมขององค์ประกอบแรกตามด้วยการเติมที่สองตามด้วยเนื้อหาขององค์ประกอบที่สอง

ดังนั้นเนื้อหาของทั้งสององค์ประกอบจะจบลงด้วยการ2emแยกออกจากกัน

ตอนนี้แทนที่ padding นั้นด้วย 1em margin ระยะขอบนั้นถือว่าอยู่นอกองค์ประกอบและระยะขอบของรายการที่อยู่ติดกันจะทับซ้อนกัน

ดังนั้นในตัวอย่างนี้คุณจะจบลงด้วยเนื้อหาขององค์ประกอบแรกตามด้วยมาร์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มาตรฐาน) แสดงเฉพาะส่วนเนื้อหาตามความกว้างที่กำหนดดังนั้นติดตามสิ่งนี้ในการคำนวณโครงร่าง โปรดทราบว่ากล่องขอบจะเห็นการกลับมาค่อนข้างพร้อมกับ Bootstrap 3 ที่รองรับ

มีคำอธิบายทางเทคนิคเพิ่มเติมสำหรับคำถามของคุณ แต่หากคุณกำลังมองหาวิธีคิดเกี่ยวกับการวาง & ขอบที่จะช่วยให้คุณเลือกเวลาและวิธีการใช้งานสิ่งนี้อาจช่วยได้

เปรียบเทียบองค์ประกอบบล็อกกับภาพที่แขวนอยู่บนผนัง:

• หน้าต่างเบราเซอร์เป็นเช่นเดียวกับผนัง
• เนื้อหาเป็นเช่นเดียวกับการถ่ายภาพ
• ขอบเป็นเช่นเดียวกับพื้นที่ผนังระหว่างภาพกรอบ
• การขยายเป็นเหมือนการปูรอบภาพถ่าย
• ชายแดนเป็นเช่นเดียวกับชายแดนในกรอบที่

เมื่อตัดสินใจระหว่างการเว้นระยะขอบ & การเว้นวรรคก็เป็นกฎง่ายๆที่จะใช้ระยะขอบเมื่อคุณเว้นระยะองค์ประกอบในความสัมพันธ์กับสิ่งอื่น ๆ บนผนังและการขยายเมื่อคุณปรับลักษณะที่ปรากฏขององค์ประกอบเอง อัตรากำไรขั้นต้นจะไม่เปลี่ยนขนาดขององค์ประกอบ แต่ padding โดยทั่วไปจะทำให้องค์ประกอบที่ใหญ่กว่า1

¹ กล่องแบบเริ่มต้นนี้สามารถเปลี่ยนแปลงกับแอตทริบิวต์box-sizing

MARGIN vs PADDING :

1. มาร์จิ้นถูกใช้ในองค์ประกอบเพื่อสร้างระยะห่างระหว่างองค์ประกอบนั้นกับองค์ประกอบอื่น ๆ ของหน้า ตำแหน่งที่ใช้ในการสร้างระยะห่างระหว่างเนื้อหาและเส้นขอบขององค์ประกอบ

2. มาร์จิ้นไม่ได้เป็นส่วนหนึ่งขององค์ประกอบที่การเติมเต็มเป็นส่วนหนึ่งขององค์ประกอบ

โปรดดูภาพด้านล่างที่สกัดจากMargin Vs Padding - คุณสมบัติ CSS

จากhttps://www.w3schools.com/css/css_boxmodel.asp

คำอธิบายของส่วนต่าง ๆ :

• เนื้อหา - เนื้อหาของกล่องที่มีข้อความและรูปภาพปรากฏ

• Padding - ลบพื้นที่รอบเนื้อหา ช่องว่างภายในโปร่งใส

• เส้นขอบ - เส้นขอบที่ล้อมรอบช่องว่างภายในและเนื้อหา

• ระยะขอบ - ล้างพื้นที่นอกเส้นขอบ ระยะขอบนั้นโปร่งใส

ตัวอย่างสด (เล่นโดยการเปลี่ยนค่า): https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

นี่คือ HTML บางส่วนที่แสดงให้เห็นถึงวิธีการpaddingและmarginผลกระทบต่อความสามารถในการคลิกและการเติมพื้นหลัง วัตถุได้รับการคลิกไปที่การเติม แต่การคลิกบนวัตถุที่ต้องการขยายพื้นที่ไปที่แม่ของมัน

$(".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เพื่อให้ ' พอดี ' และไม่รบกวนองค์ประกอบอื่น ๆ รอบ ๆ

ดังนั้นโดยทั่วไปฉันเริ่มต้นด้วยการใช้ paddings เพื่อให้ได้ทุกอย่าง ' packed' จากนั้นใช้ระยะขอบเพื่อปรับแต่งเล็กน้อย

สิ่งที่ควรระวังอีกประการหนึ่งคือการแพ็ดดิงนั้นมีความสอดคล้องกันมากขึ้นในเบราว์เซอร์ที่แตกต่างกันและ IE ก็ไม่ได้ให้อัตรากำไรติดลบเช่นกัน

ระยะขอบจะล้างพื้นที่รอบ ๆ องค์ประกอบ (นอกเส้นขอบ) แต่ช่องว่างภายในจะล้างพื้นที่รอบ ๆ เนื้อหา (ภายในเส้นขอบ) ขององค์ประกอบ

หมายความว่าองค์ประกอบของคุณไม่ทราบระยะขอบด้านนอกดังนั้นหากคุณกำลังพัฒนาตัวควบคุมเว็บแบบไดนามิกฉันแนะนำให้ใช้ช่องว่างภายในกับขอบหากคุณสามารถทำได้

โปรดทราบว่าบางครั้งคุณต้องใช้ระยะขอบ

มันเป็นเรื่องที่ดีที่จะทราบความแตกต่างระหว่างและmargin paddingนี่คือความแตกต่างบางประการ:

• Margin เป็นพื้นที่ด้านนอกขององค์ประกอบในขณะที่การเติมคือช่องว่างด้านในขององค์ประกอบ

• มาร์จิ้นเป็นช่องว่างที่อยู่นอกเส้นขอบขององค์ประกอบในขณะที่ช่องว่างภายในเป็นช่องว่างที่อยู่ภายในเส้นขอบของมัน

• มาร์จิ้นยอมรับค่าอัตโนมัติ: margin: autoแต่คุณไม่สามารถตั้งค่าช่องว่างภายในเป็นอัตโนมัติ

• สามารถตั้งค่าระยะขอบเป็นหมายเลขใดก็ได้ แต่การขยายต้องไม่เป็นลบ

• เมื่อคุณสไตล์องค์ประกอบ padding นอกจากนี้ยังจะได้รับผลกระทบ (เช่นสีพื้นหลัง) แต่ไม่ขอบ

สิ่งหนึ่งที่ควรทราบคือเมื่อการย่อขอบอัตโนมัติทำให้คุณรำคาญ (และคุณไม่ได้ใช้สีพื้นหลังในองค์ประกอบของคุณ) สิ่งที่ง่ายกว่าคือใช้ช่องว่างภายใน

มาร์จิ้นขั้นสูงเปรียบเทียบกับแพ็ดดิ้งอธิบาย

มันไม่เหมาะสมที่จะใช้paddingพื้นที่เนื้อหาในองค์ประกอบ; คุณจะต้องใช้marginในองค์ประกอบลูกแทน เบราว์เซอร์ที่เก่ากว่าเช่น Internet Explorer ตีความรูปแบบกล่องยกเว้นเมื่อมันมาถึงการใช้marginที่ทำงานอย่างสมบูรณ์แบบในInternet Explorer 4

มีข้อยกเว้นสองประการเมื่อใช้padding มีความเหมาะสมที่จะใช้:

1. มันถูกนำไปใช้กับองค์ประกอบแบบอินไลน์ซึ่งไม่สามารถมีองค์ประกอบเด็ก ๆ เช่นองค์ประกอบอินพุต

2. คุณกำลังชดเชยข้อผิดพลาดเบราว์เซอร์เบ็ดเตล็ดที่ผู้ขาย * ไอ * Mozilla * ไอ * ปฏิเสธที่จะแก้ไขและมีความแน่นอน (ในระดับที่คุณมีการแลกเปลี่ยนเป็นประจำกับบรรณาธิการ W3C และ WHATWG) ที่คุณต้องมีวิธีแก้ปัญหาการทำงานและโซลูชั่นนี้ จะไม่ส่งผลกระทบต่อสไตล์ของสิ่งอื่น ๆ จากนั้นข้อบกพร่องที่คุณจะชดเชย

เมื่อคุณมีองค์ประกอบความกว้าง 100% คุณจะได้รับได้อย่างมีประสิทธิภาพpadding: 50px; width: calc(100% + 100px);เนื่องจากmarginจะไม่ได้เพิ่มให้กับwidthมันจะไม่ทำให้เกิดปัญหารูปแบบที่ไม่คาดคิดเมื่อคุณใช้marginบนchild elementsแทนpaddingโดยตรงในองค์ประกอบ

ดังนั้นหากคุณไม่ได้ทำหนึ่งในสองสิ่งนี้ไม่ได้เพิ่มการเติมเข้าไปในองค์ประกอบ แต่เป็นองค์ประกอบโดยตรงของเด็ก / ลูกเพื่อให้แน่ใจว่าคุณจะได้รับพฤติกรรมที่คาดหวังในเบราว์เซอร์ทั้งหมด

ก่อนอื่นเรามาดูว่าอะไรคือความแตกต่างและความรับผิดชอบแต่ละอย่าง:

1)

ระยะขอบคุณสมบัติระยะขอบ CSS ใช้เพื่อสร้างพื้นที่รอบ ๆ องค์ประกอบ
คุณสมบัติที่อัตรากำไรขั้นต้นกำหนดขนาดของพื้นที่สีขาวที่อยู่นอกชายแดน ด้วย CSS คุณสามารถควบคุมระยะขอบได้อย่างเต็มที่
มีคุณสมบัติ CSS สำหรับการตั้งค่าระยะขอบสำหรับแต่ละด้านขององค์ประกอบ (ด้านบนขวาล่างและซ้าย)

2) การแพ็ดดิง

คุณสมบัติการแพ็ด CSS ถูกใช้เพื่อสร้างพื้นที่รอบ ๆ เนื้อหา
การขยายจะล้างบริเวณรอบ ๆ เนื้อหา (ภายในกรอบ) ขององค์ประกอบ
ด้วย CSS คุณสามารถควบคุมการขยายได้อย่างสมบูรณ์ มีคุณสมบัติ CSS สำหรับการตั้งค่าการเติมสำหรับแต่ละด้านขององค์ประกอบ (ด้านบนขวาล่างและซ้าย)

ดังนั้นอัตรากำไรขั้นต้นเป็นช่องว่างรอบองค์ประกอบในขณะที่Paddingเป็นช่องว่างรอบเนื้อหาซึ่งเป็นส่วนหนึ่งขององค์ประกอบ

ภาพจากนักเขียนรหัสนี้แสดงให้เห็นว่าขอบและเส้นขอบเชื่อมโยงกันอย่างไรและกล่องขอบและกล่องเนื้อหาสร้างความแตกต่างอย่างไร

นอกจากนี้พวกเขากำหนดแต่ละส่วนดังต่อไปนี้:

• เนื้อหา - กำหนดพื้นที่เนื้อหาของกล่องที่มีเนื้อหาจริงเช่นข้อความรูปภาพหรือองค์ประกอบอื่น ๆ
• Padding - เป็นการลบเนื้อหาหลักออกจากกล่องที่มีอยู่
  
• เส้นขอบ - สิ่งนี้ล้อมรอบทั้งเนื้อหาและช่องว่างภายใน
• Margin - พื้นที่นี้กำหนดพื้นที่โปร่งใสที่แยกมันออกจากองค์ประกอบอื่น ๆ

ฉันใช้หลักการนี้เสมอ:

นี่คือรูปแบบกล่องจากคุณลักษณะการตรวจสอบองค์ประกอบใน Firefox มันทำงานเหมือนหัวหอม

• เนื้อหาของคุณอยู่ตรงกลาง
• การเว้นช่องว่างเป็นช่องว่างระหว่างเนื้อหาและขอบของแท็กที่อยู่ด้านใน
• เส้นขอบและข้อมูลจำเพาะ
• อัตรากำไรคือพื้นที่รอบ ๆ แท็ก

ดังนั้นระยะขอบที่ใหญ่กว่าจะเพิ่มพื้นที่รอบ ๆ กล่องที่มีเนื้อหาของคุณ

การขยายที่ใหญ่กว่าจะเพิ่มช่องว่างระหว่างเนื้อหาของคุณกับช่องที่อยู่ข้างใน

จะไม่มีการเพิ่มหรือลดขนาดของกล่องหากตั้งค่าเป็นค่าเฉพาะ

ขอบ

Margin มักจะใช้เพื่อสร้างช่องว่างระหว่างองค์ประกอบของตัวเองและรอบทิศทาง

ตัวอย่างเช่นฉันใช้มันเมื่อฉันสร้าง navbar เพื่อให้มันติดที่ขอบของหน้าจอและไม่มีช่องว่างสีขาว

การขยายความ

ฉันมักจะใช้เมื่อฉันมีองค์ประกอบอยู่ภายในเส้นขอบ<div>หรือสิ่งที่คล้ายกันและฉันต้องการลดขนาดของมัน แต่ในเวลาที่ฉันต้องการรักษาระยะห่างหรือระยะห่างระหว่างองค์ประกอบอื่น ๆ รอบ ๆ

ดังนั้นสั้น ๆ มันเป็นสถานการณ์ ขึ้นอยู่กับสิ่งที่คุณพยายามจะทำ

มาร์จิ้นอยู่นอกกรอบและแพ็ดดิ้งอยู่ภายในกล่อง