เพิ่มช่องว่างระหว่างองค์ประกอบ HTML โดยใช้ CSS เท่านั้น

ฉันมีองค์ประกอบ HTML ที่เหมือนกันหลายรายการต่อกัน:

<span>1</span>
<span>2</span>
<span>3</span>

ฉันกำลังมองหาวิธีที่ดีที่สุดในการเพิ่มพื้นที่ระหว่างองค์ประกอบโดยใช้CSS เท่านั้น

[no space]  [1]  [space 10px]  [2]  [space 10px]  [3]  [no space]

นอกจากนี้:

• โปรดจดบันทึกความเข้ากันได้ของเบราว์เซอร์ของใบเสร็จของคุณ

อัปเดต

ดูเหมือนว่าฉันพูดไม่ชัด ฉันไม่ต้องการใช้มาร์กอัป HTML เพิ่มเติมใด ๆ เช่น

<span></span>  <span></span>  <span class="last_span"></span>

ฉันไม่ต้องการใช้ตาราง

ฉันต้องการให้ CSS กำหนดเป้าหมายช่วงแรกและช่วงสุดท้ายโดยอัตโนมัติ

ฉันไม่ต้องการใช้จาวาสคริปต์

ข้อกำหนดเพิ่มเติม: ช่วงสุดท้ายต้องไม่ใช่ LAST CHILD ของแท็กหลัก แต่จะเป็นช่วงสุดท้ายของแท็กหลัก Spans ไม่มีแท็กอื่น ๆ ระหว่างพวกเขา

วิธีที่ดีในการดำเนินการคือ:

span + span {
    margin-left: 10px;
}

ทุกคนspanนำโดยspan(เพื่อให้ทุกคนspanยกเว้นคนแรก) margin-left: 10pxจะมี

นี่คือคำตอบโดยละเอียดสำหรับคำถามที่คล้ายกัน: ตัวแยกระหว่างองค์ประกอบโดยไม่ต้องแฮ็ก

เพียงใช้ขอบหรือช่องว่างภายใน

ในกรณีของคุณโดยเฉพาะคุณสามารถใช้margin:0 10pxเพียงที่ <span>2

อัปเดต

นี่คือโซลูชัน CSS3 ที่ดี ( jsFiddle ):

span {
    margin: 0 10px;
}

span:first-of-type {
    margin-left: 0;
}

span:last-of-type {
    margin-right: 0;
}

เลือกองค์ประกอบขั้นสูงโดยใช้ตัวเลือกชอบ:nth-child(), :last-child, :first-of-typeฯลฯ ได้รับการสนับสนุนตั้งแต่ Internet Explorer 9

เพิ่มกฎเหล่านี้ในคอนเทนเนอร์หลัก:

display: grid
grid-auto-flow: column
grid-column-gap: 10px

ข้อมูลอ้างอิงที่ดี: https://cssreference.io/

ความเข้ากันได้ของเบราว์เซอร์: https://gridbyexample.com/browsers/

คุณสามารถจัดรูปแบบองค์ประกอบโดยไม่รวมองค์ประกอบแรกในโค้ดบรรทัดเดียว:

span ~ span {
    padding-left: 10px;
}

ไม่ต้องเปลี่ยนคลาสใด ๆ

คุณสามารถใช้ประโยชน์จากข้อเท็จจริงที่spanเป็นองค์ประกอบแบบอินไลน์

span{
     word-spacing:10px;
}

อย่างไรก็ตามวิธีนี้จะหยุดทำงานหากคุณมีข้อความมากกว่าหนึ่งคำในช่วงของคุณ

span:not(:last-child) {
    margin-right: 10px;
}

คุณสามารถเขียนดังนี้:

span{
 margin-left:10px;
}
span:first-child{
 margin-left:0;
}

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

แนวนอน

span{
    margin-right: 10px;
    float: left;
}

แนวตั้ง

span{
    margin-bottom: 10px;
}

เข้ากันได้กับทุกเบราว์เซอร์

คุณควรห่อองค์ประกอบของคุณในภาชนะแล้วใช้ CSS3 ใหม่ที่มีคุณสมบัติเช่นตาราง CSS , ฟรีหลักสูตรและจากนั้นใช้grid-gap:valueที่ถูกสร้างขึ้นสำหรับปัญหาเฉพาะของคุณ

span{
  border:1px solid red;
}
.inRow{
  display:grid;
  grid-template-columns:repeat(auto-fill,auto);
  grid-gap:10px /*This add space between elements, only works on grid items*/
}
.inColumn{
  display:grid;
  grid-template-rows:repeat(auto-fill,auto);
  grid-gap:15px;
}

<div class="inrow">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>
<div class="inColumn">
  <span>4</span>
  <span>5</span>
  <span>6</span>
</div>

หรือแทนที่จะตั้งค่าระยะขอบและลบล้างคุณสามารถตั้งค่าให้เหมาะสมได้ทันทีด้วยคำสั่งผสมต่อไปนี้:

span:not(:first-of-type) {
    margin-left:  5px;
}

span:not(:last-of-type) {
    margin-right: 5px;
}

span.middle {
    margin: 0 10px 0 10px; /*top right bottom left */
}

<span>text</span> <span class="middle">text</span> <span>text</span>

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

.container {
  display: flex;
}
.container > * {
  margin: 5px;
}

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

.container {
  display: flex;
}
.container > :first-child {
  margin-right: 5px;
}
.container > *:not(:first-child) {
  margin: 5px;
}