CSS 만 사용하여 HTML 요소 사이에 공백 추가

여러 개의 동일한 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에서 첫 번째와 마지막 범위를 자동으로 타겟팅하고 싶습니다.

자바 스크립트를 사용하고 싶지 않습니다.

선택적 요구 사항 : 마지막 스팬은 상위 태그의 마지막 하위가 될 수 없지만 상위 태그의 마지막 스팬이됩니다. 스팬에는 그 사이에 다른 태그가 없습니다.

이를 수행하는 좋은 방법은 다음과 같습니다.

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

모든 span앞에는는 span(그래서, 모든 span처음을 제외하고는)해야합니다 margin-left: 10px.

다음은 유사한 질문에 대한 자세한 답변입니다. 해킹이없는 요소 간 구분자

여백이나 패딩을 사용하십시오.

특정 경우 margin:0 10px에는 2nd에서만 사용할 수 있습니다 <span>.

최신 정보

다음은 멋진 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, 등은 인터넷 익스플로러 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;
}

모든 브라우저와 호환됩니다.

컨테이너 안에 요소를 래핑 한 다음 css grid , free course 와 같은 새로운 CSS3 기능 을 사용한 다음 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유형에 관계없이 withing 각 요소 는 동일한 주변 여백을받습니다.

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

항목을 행으로 정렬하고 싶지만 첫 번째 요소가의 가장 왼쪽 가장자리에 닿도록 container하고 다른 모든 요소의 간격을 동일하게 유지하려면 다음을 사용할 수 있습니다.

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