display 속성 값으로 inline-block을 설정할 수 있습니다. 이는 inline과 block의 절충입니다.

width 속성 설정

다음 html 코드가 있습니다.

<div>감자, <span>고구마</span>, 옥수수</div>

결과는 다음과 같습니다.

다음과 같이 CSS를 설정해도

span {
  display: inline-block;
}

결과는 처음과 같습니다.

inline-block은 줄 바꿈이 일어나지 않는다는 면에서 inline과 같기 때문입니다.

다음과 같이 width 속성을 추가하면

span {
  display: inline-block;
  width: 100px;
}

결과는 다음과 같습니다.

inline-block은 width를 설정할 수 있다는 면에서 block과 같기 때문입니다. 만약 주어진 너비보다 안에 있는 내용이 많다면 안에서 줄 바꿈이 일어납니다.

html 코드를 다음과 같이 고치면

<div>감자, <span>고구마(학명: Ipomoea batatas)는 메꽃과의 한해살이 뿌리 채소로, 주로 전분이 많고 단 맛이 나는 혹뿌리를 가진 재배용 작물이다.</span>, 옥수수</div>

결과는 다음과 같습니다.

margin 속성 설정

그리고 margin-left와 margin-right 속성 뿐만 아니라 margin-top과 margin-bottom 속성도 설정할 수 있습니다.

다음 html 코드에 대해서

<div>양파, 당근, 오이</div>
<div>감자, <span>고구마</span>, 옥수수</div>
<div>복숭아, 사과, 배</div>

다음 CSS를 적용하면

span {
  display: inline-block;
  width: 100px;
}

결과는 다음과 같습니다.

margin 속성을 추가하면

span {
  display: inline-block;
  margin-top: 100px;
  margin-right: 100px;
  margin-bottom: 100px;
  margin-left: 100px;
  width: 100px;
}

결과는 다음과 같습니다.

height 속성 설정

width 뿐만 아니라 height 속성도 설정이 가능합니다.

span {
  background-color: red;
  display: inline-block;
  height: 100px;
  margin-top: 30px;
  margin-right: 30px;
  margin-bottom: 30px;
  margin-left: 30px;
  width: 100px;
}

구분을 위해서 background-color 속성도 추가했습니다. 결과는 다음과 같습니다.

text-align 속성 설정

width 속성을 설정할 수 있기 때문에 text-align 속성도 설정할 수 있습니다.

span {
  background-color: red;
  display: inline-block;
  height: 100px;
  margin-top: 30px;
  margin-right: 30px;
  margin-bottom: 30px;
  margin-left: 30px;
  text-align: right;
  width: 100px;
}

결과는 다음과 같습니다.

정리하면 span과 같은 inline 요소에 대해서 width, height, margin 속성을 설정하고 싶다면 display 속성 값으로 inline-block을 사용하면 됩니다.