Chỉ thêm khoảng cách giữa các phần tử HTML bằng CSS

Tôi có một số phần tử HTML giống nhau nối tiếp nhau:

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

Tôi đang tìm cách tốt nhất để thêm không gian GIỮA các phần tử chỉ sử dụng CSS

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

Ngoài ra:

• Vui lòng ghi lại khả năng tương thích với trình duyệt của biên nhận của bạn

CẬP NHẬT

Có vẻ như tôi đã không rõ ràng. Tôi không muốn sử dụng BẤT KỲ TIẾP THỊ HTML BỔ SUNG nào như

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

Tôi không muốn sử dụng bảng

Tôi muốn khoảng đầu tiên và khoảng cuối cùng được CSS nhắm mục tiêu tự động

Tôi không muốn sử dụng javascript

Yêu cầu tùy chọn: khoảng cuối không thể là CON CUỐI CÙNG của thẻ mẹ, nhưng nó sẽ là GIẢI CUỐI CÙNG của thẻ mẹ. Các nhịp không có bất kỳ thẻ nào khác giữa chúng.

Một cách tốt để làm điều đó là:

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

Mọi spanđứng trước a span(vì vậy, mọi spanngoại trừ đầu tiên) sẽ có margin-left: 10px.

Đây là câu trả lời chi tiết hơn cho một câu hỏi tương tự: Dấu phân cách giữa các phần tử không có hack

Chỉ cần sử dụng ký quỹ hoặc đệm.

Trong trường hợp cụ thể của bạn, bạn chỉ có thể sử dụng margin:0 10pxvào ngày 2 <span>.

CẬP NHẬT

Đây là một giải pháp CSS3 hay ( jsFiddle ):

span {
    margin: 0 10px;
}

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

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

Lựa chọn yếu tố nâng cao sử dụng bộ chọn thích :nth-child(), :last-child, :first-of-typevv được hỗ trợ kể từ khi Internet Explorer 9.

thêm các quy tắc này vào vùng chứa mẹ:

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

Tham khảo tốt: https://cssreference.io/

Khả năng tương thích của trình duyệt: https://gridbyexample.com/b browser /

Thật dễ dàng.

Bạn có thể tạo kiểu cho các phần tử bằng cách loại trừ phần tử đầu tiên, chỉ trong một dòng mã:

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

và thực hiện, không có thao tác của lớp.

Bạn có thể tận dụng thực tế spanlà một phần tử nội tuyến

span{
     word-spacing:10px;
}

Tuy nhiên, giải pháp này sẽ bị phá vỡ nếu bạn có nhiều hơn một từ văn bản trong khoảng thời gian của mình

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

Bạn có thể viết như thế này:

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

<span>là một phần tử nội dòng, vì vậy bạn không thể tạo khoảng cách trên chúng mà không làm cho nó ở mức khối. Thử cái này

Ngang

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

Theo chiều dọc

span{
    margin-bottom: 10px;
}

Tương thích với tất cả các trình duyệt.

Bạn nên bọc các phần tử của mình bên trong một vùng chứa, sau đó sử dụng các tính năng CSS3 mới như lưới css , khóa học miễn phí và sau đó sử dụng grid-gap:valuecác phần tử đã được tạo cho vấn đề cụ thể của bạn

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>

Hoặc, thay vì đặt lợi nhuận và ghi đè nó, bạn có thể đặt nó đúng cách ngay lập tức với kết hợp sau:

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>

Nếu bạn muốn căn chỉnh các mục khác nhau và bạn muốn có cùng lề xung quanh tất cả các cạnh, bạn có thể sử dụng cách sau. Mỗi phần tử trong đó container, bất kể loại nào, sẽ nhận được cùng một biên xung quanh.

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

Nếu bạn muốn căn chỉnh các mục trong một hàng, nhưng phần tử đầu tiên chạm vào cạnh ngoài cùng bên trái của containervà để tất cả các phần tử khác cách đều nhau, bạn có thể sử dụng điều này:

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