CSS 표시 : 인라인 블록이 여백 상단을 허용하지 않습니까?

CSS 표시 : 인라인 블록이 여백 상단을 허용하지 않습니까?

---

display : inline-block 요소가 있지만 margin-top을 허용하지 않는 것 같습니다. 요소가 여전히 인라인 요소로 취급되기 때문입니까?

그렇다면 해결 방법이있는 사람이 있습니까?

---

# 1 수정 :

내 CSS는 매우 간단합니다.

.label {
  background: #ffffff;
  display: inline-block;
  margin-top: -2px;
  padding: 7px 7px 5px;
}

결국 콘텐츠를 다른 div에 래핑하고 여백 상단을 제공했습니다. 그러나 그것은 많은 추가 마크 업을 유발하고 내 코드를 덜 명확하게 만듭니다.

# 2 수정 :

margin-top& margin-bottomon inline-block요소는 양수 값으로 만 작동하는 것 같습니다.

---

나는 display: table. 그것은 인라인 블록의 콘텐츠 맞춤 속성을 가지고 있지만 그에 따라 콘텐츠를 이동시키는 방식으로 음의 여백을 지원합니다. 아마 당신이 그것을 사용하는 방법은 아니지만 작동합니다.

---

음수 여백을

.label{
    position:relative;
    top:-2px;
}

나머지 .label스타일 외에도

---

다음 vertical-align과 같이 시도 할 수 있습니다 .

.label {
  background: #ffffff;
  display: inline-block;
  margin-top: -2px;
  vertical-align: 2px;
  padding: 7px 7px 5px;
}

jsfiddle에서 예제를 만들었습니다 : http://jsfiddle.net/zmmbreeze/X6BjK/ .
그러나 세로 정렬은 IE6 / 7에서 잘 작동하지 않습니다. 그리고 오페라 (11.64) 렌더링 버그가 있습니다.

그래서 position:relative대신 사용 하는 것이 좋습니다 .

---

그게 사실입니다. 여백 대신 패딩을 사용할 수 있습니다. 또 다른 해결책은 요소에 컨테이너 div를 사용하는 것입니다. 해당 div inline-block를 만들고 현재 요소를 해당 컨테이너 내부의 블록으로 만듭니다. 그런 다음 요소에 여백을 줄 수 있습니다.

가급적 jsfiddle.net 등에서 구체적인 예가 있으면 도움이 될 것입니다. 여기에 나와 같은 일반적인 설명을 포함하는 대신 답변을 더 구체적으로 지정하는 데 도움이 될 것입니다. ;)

참고 URL : https://stackoverflow.com/questions/7611030/css-display-inline-block-does-not-accept-margin-top