เหตุใด div จึงมี“ display: table-cell;” ไม่ได้รับผลกระทบจากอัตรากำไร?

ฉันมีdivองค์ประกอบถัดจากแต่ละอื่น ๆ display: table-cell;ที่มี

ฉันต้องการตั้งค่าmarginระหว่างพวกเขา แต่margin: 5pxไม่มีผลใด ๆ ทำไม?

รหัสของฉัน:

<div style="display: table-cell; margin: 5px; background-color: red;">1</div>
<div style="display: table-cell; margin: 5px; background-color: green;">1</div>

สาเหตุ

จากเอกสาร MDN :

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

กล่าวอีกนัยหนึ่งmarginคุณสมบัติไม่สามารถใช้ได้กับdisplay:table-cellองค์ประกอบ

สารละลาย

พิจารณาใช้border-spacingคุณสมบัติแทน

หมายเหตุ: มันควรจะนำไปใช้กับองค์ประกอบหลักที่มีรูปแบบและdisplay:tableborder-collapse:separate

ตัวอย่างเช่น:

HTML

<div class="table">
    <div class="row">
        <div class="cell">123</div>
        <div class="cell">456</div>
        <div class="cell">879</div>
    </div>
</div>

CSS

.table {display:table;border-collapse:separate;border-spacing:5px;}
.row {display:table-row;}
.cell {display:table-cell;padding:5px;border:1px solid black;}

ดูตัวอย่าง jsFiddle

ระยะขอบที่ต่างกันทั้งแนวนอนและแนวตั้ง

ตามที่กล่าวไว้โดย Diego Quirós border-spacingสถานที่ให้บริการยังยอมรับสองค่าเพื่อตั้งค่าระยะห่างที่แตกต่างกันสำหรับแกนแนวนอนและแนวตั้ง

ตัวอย่างเช่น

.table {/*...*/border-spacing:3px 5px;} /* 3px horizontally, 5px vertically */

คุณสามารถใช้ div ภายในเพื่อตั้งค่าระยะขอบ

<div style="display: table-cell;">
   <div style="margin:5px;background-color: red;">1</div>
</div>
<div style="display: table-cell; ">
  <div style="margin:5px;background-color: green;">1</div>
</div>

JS Fiddle

เซลล์ตารางไม่เกี่ยวข้องกับระยะขอบ แต่คุณสามารถใช้เส้นขอบโปร่งใสแทน:

div {
  display: table-cell;
  border: 5px solid transparent;
}

หมายเหตุ: คุณไม่สามารถใช้เปอร์เซ็นต์ที่นี่ ... :(

หากคุณมี div ติดกันเช่นนี้

<div id="1" style="float:left; margin-right:5px">

</div>
<div id="2" style="float:left">

</div>

มันน่าจะใช้ได้นะ!