HTML에서 버튼 사이에 공백 추가

1. 두 버튼 사이에 빈 div 요소를 추가하여 HTML에서 두 버튼 사이에 공간 추가
2. margin-right 속성을 사용하여 HTML에서 버튼 사이에 공간 배치
3. margin-right 속성 및 not(:last-child) 선택기를 사용하여 HTML의 여러 버튼 사이에 공간 제공

이 기사에서는 두 HTML 버튼 사이에 공간을 추가하는 몇 가지 방법을 소개합니다.

두 버튼 사이에 빈 div 요소를 추가하여 HTML에서 두 버튼 사이에 공간 추가

두 버튼 사이에 빈 div를 추가하여 두 버튼 사이에 공백을 추가할 수 있습니다. 그런 다음 div에 버튼 사이에 약간의 공간을 만드는 너비를 제공할 수 있습니다.

기본적으로 div에는 block의 display 속성이 있습니다. div가 해당 위치의 전체 행을 차지함을 의미합니다.

div 뒤에 요소를 추가하면 해당 요소는 브라우저의 div 아래에 배치됩니다.

따라서 div의 표시 속성을 inline-block으로 변경해야 합니다. inline-block 요소는 블록과 인라인의 속성을 모두 가지고 있습니다.

inline-block 요소는 너비, 여백, 패딩 등을 가질 수 있지만 block 요소와 달리 해당 위치의 전체 행을 사용하지 않습니다.

예를 들어 div를 만듭니다. 그 div 안에 button 태그를 사용하여 두 개의 버튼을 만듭니다. 해당 버튼의 이름을 Button 1 및 Button 2로 지정합니다.

해당 버튼 사이에 div를 만들고 space 클래스를 지정합니다. 이 div에는 요소가 포함되어서는 안 됩니다.

CSS에서 클래스 space가 있는 내부 div를 선택하고 display 속성을 inner-block으로 설정합니다. 요구 사항에 따라 div에 약간의 너비를 지정합니다.

width의 값은 버튼 사이의 공간이 됩니다. 또한 div가 필요한 높이만 사용하도록 height 속성을 auto로 설정합니다.

아래 예는 두 개의 버튼에 4px의 공백이 있음을 보여줍니다.

예제 코드:

<div>
  <button>
    Button 1
  </button>
  <div class="space">
  </div>
  <button>
    Button 2
  </button>
</div>

.space {
  width: 4px;
  height: auto;
  display: inline-block;
}

margin-right 속성을 사용하여 HTML에서 버튼 사이에 공간 배치

CSS margin 속성은 정의된 테두리 외부의 요소 주위에 공간을 만듭니다. margin 속성은 margin-top, margin-bottom, margin-left 및 margin-right의 네 가지 속성을 결합합니다.

margin-top 속성은 요소 상단에 공간을 만듭니다. 마찬가지로 margin-bottom, margin-right 및 margin-left 속성은 요소의 하단, 오른쪽 및 왼쪽에 공간을 만듭니다.

첫 번째 버튼 요소에 margin-right 속성을 사용하여 버튼 사이에 공백을 만들 수 있습니다.

결과적으로 버튼의 오른쪽에 일정 너비의 여백이 생성됩니다. 그런 다음 다른 버튼은 여백 옆에 있습니다.

예를 들어 button 태그와 이름 Button 1 및 Button 2를 사용하여 두 개의 버튼을 생성합니다. 버튼의 클래스를 B1 및 B2로 설정합니다.

CSS에서 B1 클래스를 선택하고 margin-right 속성을 4px로 설정합니다. 이렇게 하면 오른쪽 Button 1에 4px 공간이 만들어지고 두 버튼 사이에 공간이 만들어집니다.

예제 코드:

<button class="B1">
  Button1
</button>
<button class="B2">
  Button2
</button>

.B1 {
 margin-right: 4px;
}

margin-right 속성 및 not(:last-child) 선택기를 사용하여 HTML의 여러 버튼 사이에 공간 제공

margin-right 속성과 CSS not() 선택기를 사용하여 여러 버튼 사이에 공백을 추가할 수 있습니다. 이 접근 방식의 논리는 두 번째 방법에서와 같이 margin-right 속성을 사용하여 각 버튼 사이에 공간을 생성한다는 것입니다.

그러나 마지막 버튼 뒤에 공백을 만들지 않습니다.

이를 위해 not() 선택기를 사용합니다. 내부에서 not 선택자에서 :last-child를 사용할 수 있습니다.

:last-child 선택자는 컨테이너 내부의 마지막 자식을 나타냅니다. 전체적으로 다음 규칙을 적용하여 스타일을 적용할 수 있습니다.

.container>.button:not(:last-child){

}

> 기호는 container 안의 모든 자식을 선택합니다. 결과적으로 스타일은 마지막 자식을 제외하고 부모 container 안에 button 클래스가 있는 모든 자식에 적용됩니다.

예를 들어 div를 만들고 container 클래스를 지정합니다.

div 안에 세 개의 버튼을 만들고 Button 1, Button 2 및 Button 3으로 이름을 지정합니다. 또한 버튼을 각 버튼의 클래스로 설정합니다.

이제 위에서 언급한 규칙을 사용하여 CSS에서 스타일을 설정합니다. 규칙 내에서 margin-right 속성을 사용하고 10px로 설정하여 하위 요소 또는 버튼 사이에 10px 공간을 추가합니다.

아래 예는 세 개의 버튼 사이에 10px의 간격이 있음을 보여줍니다.

예제 코드:

<div class='container'>
 <button class='button'>Button 1</button>
 <button class='button'>Button 2</button>
 <button class='button'>Button 3</button>
</div>

.container>.button:not(:last-child) {
 margin-right: 10px;
}