ความแตกต่างระหว่างระยะห่างระหว่างและช่องว่างภายใน?

อะไรคือความแตกต่างระหว่างmarginและpaddingใน CSS? มันดูเหมือนจะไม่ได้มีจุดประสงค์มาก คุณช่วยยกตัวอย่างความแตกต่างได้ไหม (และทำไมจึงเป็นเรื่องสำคัญที่จะต้องทราบความแตกต่าง)

paddingคือช่องว่างระหว่างเนื้อหาและborderส่วนmarginช่องว่างด้านนอกชายแดน นี่คือภาพที่ฉันพบจากการค้นหาโดย Google ที่แสดงให้เห็นถึงแนวคิดนี้

สิ่งสำคัญที่ขาดหายไปในคำตอบที่นี่:

ระยะขอบบน / ล่างพับได้

ดังนั้นหากคุณมีระยะขอบ 20px ที่ด้านล่างขององค์ประกอบและระยะขอบ 30px ที่ด้านบนขององค์ประกอบถัดไประยะห่างระหว่างองค์ประกอบทั้งสองจะเท่ากับ 30px แทนที่จะเป็น 50px สิ่งนี้ไม่ใช้กับระยะขอบซ้าย / ขวาหรือการเติม

มาร์จิ้นถูกนำไปใช้กับองค์ประกอบด้านนอกของคุณดังนั้นจึงมีผลต่อองค์ประกอบของคุณที่อยู่ห่างจากองค์ประกอบอื่น ๆ

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

นอกจากนี้การใช้มาร์จิ้นจะไม่ส่งผลกระทบต่อขนาดองค์ประกอบของคุณในขณะที่การเติมจะทำให้มิติองค์ประกอบของคุณ (ตั้งค่าความสูง + การเติมเต็ม) ดังนั้นตัวอย่างเช่นถ้าคุณมี div 100x100px กับ 5 px การหารของคุณ

จดจำ 3 จุดเหล่านี้:

• มาร์จิ้นเป็นพื้นที่พิเศษรอบ ๆตัวควบคุม
• ช่องว่างภายในเป็นพื้นที่พิเศษภายในตัวควบคุม
• ช่องว่างภายในของตัวควบคุมด้านนอกเป็นหลักประกันของการควบคุมภายใน

ภาพสาธิต: (ที่กล่องสีแดงเป็นที่ต้องการควบคุม)

การ defenition ที่ง่ายที่สุดคือ; padding เป็นช่องว่างที่กำหนดไว้ภายในเส้นขอบขององค์ประกอบคอนเทนเนอร์และระยะขอบที่กำหนดไว้ภายนอก สำหรับองค์ประกอบที่ไม่ได้เป็นคอนเทนเนอร์การขยายอาจไม่สมเหตุสมผลนัก แต่การกำหนดระยะขอบจะช่วยจัดเรียง

การเว้นช่องว่างคือช่องว่างภายในเส้นขอบในขณะที่ระยะขอบคือช่องว่างด้านนอกชายแดน

การขยายความ

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

ขอบ

มาร์จิ้นเป็นคุณสมบัติ CSS ที่กำหนดพื้นที่ด้านนอกขององค์ประกอบให้กับองค์ประกอบภายนอกของมัน

ส่วนต่างนั้นมีผลกระทบต่อองค์ประกอบที่ทั้งสองมีหรือไม่มีขอบ หากองค์ประกอบมีเส้นขอบระยะขอบจะกำหนดพื้นที่จากเส้นขอบนี้ไปยังองค์ประกอบด้านนอกถัดไป หากองค์ประกอบไม่มีเส้นขอบมาร์จิ้นจะกำหนดพื้นที่จากเนื้อหาองค์ประกอบไปยังองค์ประกอบภายนอกตัวถัดไป

ความแตกต่างระหว่างช่องว่างภายในและระยะขอบ

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

หนึ่งในความแตกต่างที่สำคัญระหว่างระยะขอบและช่องว่างภายในไม่ได้ถูกกล่าวถึงในคำตอบใด ๆ : ความสามารถในการคลิกและการตรวจจับแบบโฮเวอร์

การเพิ่มช่องว่างภายในเพิ่มขนาดที่มีประสิทธิภาพขององค์ประกอบ บางครั้งฉันมีไอคอนขนาดเล็กที่ฉันไม่ต้องการให้มีขนาดใหญ่ขึ้นอย่างเห็นได้ชัด แต่ผู้ใช้ยังคงต้องโต้ตอบกับไอคอนนั้น ฉันเพิ่มการขยายของไอคอนเพื่อให้มีขนาดใหญ่ขึ้นสำหรับการคลิกและโฮเวอร์ การเพิ่มระยะขอบของไอคอนจะไม่มีผลเหมือนกัน

คำตอบของคำถามอื่นในหัวข้อนี้เป็นตัวอย่าง

margin = ช่องว่างรอบ ๆ (นอก) องค์ประกอบจากเส้นขอบออกไปด้านนอก

padding = เว้นวรรครอบ ๆ (ภายใน) องค์ประกอบจากข้อความถึงเส้นขอบ

ดูที่นี่: http://jsfiddle.net/robx/GaMpq/

มันเป็นสิ่งที่ดีที่จะรู้เกี่ยวกับความแตกต่างระหว่างและmargin paddingเท่าที่ฉันรู้:

• มาร์จิ้นเป็นพื้นที่ด้านนอกขององค์ประกอบในขณะที่การเติมคือช่องว่างด้านในขององค์ประกอบ กล่าวอีกนัยหนึ่งขอบคือช่องว่างด้านนอกของเส้นขอบขององค์ประกอบในขณะที่ช่องว่างภายในเป็นช่องว่างภายในเส้นขอบขององค์ประกอบ
• คุณสามารถตั้งautoค่าเป็นระยะขอบ อย่างไรก็ตามไม่อนุญาตให้ใช้ช่องว่างภายใน ดูนี่สิ
  หมายเหตุ:ใช้margin: autoเพื่อจัดองค์ประกอบของบล็อกให้อยู่กึ่งกลางภายในพาเรนต์ในแนวนอน นอกจากนี้ยังเป็นไปได้ที่จะจัดองค์ประกอบให้อยู่กึ่งกลางภายใน flexbox ในแนวตั้งหรือแนวนอนหรือทั้งสองอย่างโดยตั้งค่าระยะขอบเป็นอัตโนมัติ ดูนี่สิ
• มาร์จิ้นสามารถเป็นจำนวนลอยได้ แต่การขยายต้องไม่เป็นลบ
• เมื่อคุณจัดองค์ประกอบองค์ประกอบช่องว่างภายในจะถูกจัดสไตล์เช่นกัน แต่ไม่ใช่ระยะขอบ มาร์จิ้นได้รับสไตล์ขององค์ประกอบหลัก ตัวอย่างเช่นเมื่อคุณตั้งค่าbackground-colorคุณสมบัติเป็นสีดำช่องว่างภายใน (เช่นการเติม) จะเป็นสีดำ แต่ไม่ใช่พื้นที่ด้านนอก (เช่นระยะห่าง)

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

มาร์จิ้นและแพ็ดดิ้งเป็นทั้งสองประเภทของการแพ็ดดิงจริงๆ .... หนึ่ง (ระยะขอบ) ไปนอกขอบองค์ประกอบเพื่อทำระยะห่างจากองค์ประกอบอื่น ๆ และอีกส่วนหนึ่ง (padding) ไปนอกเนื้อหาองค์ประกอบเพื่อให้ห่างเนื้อหาจากเส้นองค์ประกอบ

Padding ช่วยให้นักพัฒนาสามารถรักษาช่องว่างระหว่างข้อความและองค์ประกอบล้อมรอบได้ มาร์จิ้นเป็นพื้นที่ที่องค์ประกอบนั้นเก็บรักษาด้วยองค์ประกอบอื่นของ DOM พาเรนต์

ดูตัวอย่าง:

<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>

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

Marginค่าสามารถประเภทดังต่อไปนี้

ก่อนอื่นอัตโนมัติอนุญาตให้เบราว์เซอร์คำนวณระยะขอบ ยิ่งไปกว่านั้นความยาวหมายถึงระยะขอบใน px, pt หรือ cm ในขณะที่% ช่วยอธิบายระยะขอบเป็นเปอร์เซ็นต์เทียบกับความกว้างขององค์ประกอบที่มี ในที่สุดสืบทอดสืบทอดแสดงว่าระยะขอบมีการสืบทอดจากองค์ประกอบหลัก

Paddingเป็นคุณสมบัติใน CSS ที่ช่วยในการสร้างพื้นที่รอบ ๆ องค์ประกอบภายในเส้นขอบ โปรแกรมเมอร์สามารถกำหนดช่องว่างภายในสำหรับด้านบนขวาล่างและซ้าย กล่าวอีกนัยหนึ่งเขาสามารถตั้งค่าเหล่านั้นโดยใช้ padding-top, padding-right, padding-bottom และ padding-left

Padding ค่าสามารถประเภทดังต่อไปนี้

ความยาวอธิบายการเติมเต็มใน px, pt หรือ cm ในขณะที่% หมายถึงการเติมเต็มเป็นเปอร์เซ็นต์เทียบกับความกว้างขององค์ประกอบที่มี ในที่สุดสืบทอดได้อธิบายว่าการเติมควรได้รับการสืบทอดจากองค์ประกอบหลัก

 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>

ความแตกต่างระหว่างมาร์จิ้นและแพ็ดดิ้ง

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

ค่า นอกจากนี้ค่าของอัตรากำไรขั้นต้นที่สามารถอัตโนมัติ, ความยาว,% หรือสืบทอดในขณะที่ค่าของการขยายที่สามารถยาว% หรือประเภทสืบทอด ดังนั้นนี่คือความแตกต่างระหว่างระยะห่างระหว่างและการเติมเต็ม

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

ลองวางสีพื้นหลังบน div block ด้วยความกว้างและความสูง คุณจะเห็นว่าการขยายเพิ่มขนาดขององค์ประกอบในขณะที่ระยะขอบเพียงแค่ย้ายมันภายในการไหลของเอกสาร

มาร์จิ้นโดยเฉพาะสำหรับการขยับองค์ประกอบรอบ ๆ

การเว้นช่องว่างคือช่องว่างระหว่างส่วนประกอบที่ใกล้ที่สุดบนหน้าเว็บและระยะขอบคือช่องว่างจากระยะขอบของหน้าเว็บ

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

มีความแตกต่างที่สำคัญอย่างหนึ่ง:

มาร์จิ้น - อยู่ด้านนอกขององค์ประกอบนั่นคือจะใช้การเปลี่ยนช่องว่าง "หลังจาก" องค์ประกอบเริ่มต้นขึ้น Padding- อยู่ด้านในส่วนอีกอันจะใช้ช่องว่าง "ก่อน" องค์ประกอบจะเริ่มขึ้น

มาร์จิ้นถูกนำไปใช้กับองค์ประกอบด้านนอกของคุณดังนั้นจึงมีผลกระทบกับองค์ประกอบของคุณไกลจากองค์ประกอบอื่น ๆ

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

นอกจากนี้การใช้มาร์จิ้นจะไม่ส่งผลกระทบต่อขนาดองค์ประกอบของคุณในขณะที่การเติมจะทำให้มิติองค์ประกอบของคุณ (ตั้งค่าความสูง + การเติมเต็ม) ดังนั้นตัวอย่างเช่นถ้าคุณมี div 100x100px กับ 5 px การหารของคุณ

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

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