여백 위쪽/여백 바닥이 작동하지 않습니다.

Question

큰 웹 프로젝트에서 작업 중이며 다음 발췌 문장은 두 개의 큰 html/css 문서의 발췌문입니다.

그러나 문제가 남아 있습니다. 내 텍스트 상자에 margin-top/bottom을 삽입 할 수 없습니다. 이러한 행 사이에 정의 된 공간 - 필요한 경우 텍스트 상자 이상의 행을 추가

• :

  나는이 일을 달성하고 싶다.

• 단일 행의 자동 중단 이후에 동일한 정의 된 공간을 사용하십시오. 이 스 니펫은 많은 자동 생성 페이지에 내장되어 있습니다. 그래서 나는 얼마나 많은 흰색 박스가 표시 될지 모르겠습니다. 브라우저 창 크기를 조정 한 후에도 더 좋은 동작을 원합니다.

HTML/CSS - 최소 (안) 작업 예 : 나는 무엇을 달성하고자하는

body { 
 
    font-family: Gill Sans, Gill Sans MT, Calibri, sans-serif; 
 
    background-color: #f0f0f0; 
 
} 
 
span.bigger { 
 
    font-size: 1.5em; 
 
    margin-right: 15px; 
 
    /*not working*/ 
 
    margin-top: 225px; 
 
    margin-bottom: 225px; 
 
    background-color: white; 
 
    padding: 5px; 
 
}

<div id="content"> 
 
    <span class="bigger">Text-Text-Text</span> 
 
    <span class="bigger">Text-Text-Text</span> 
 
    <span class="bigger">Text-Text-Text</span> 
 
    <span class="bigger">Text-Text-Text</span> 
 
    <span class="bigger">Text-Text-Text</span> 
 
    <span class="bigger">Text-Text-Text</span> 
 
    <span class="bigger">Text-Text-Text</span> 
 
    <span class="bigger">Text-Text-Text</span> 
 
    <span class="bigger">Text-Text-Text</span> 
 
    <span class="bigger">Text-Text-Text</span> 
 
    <span class="bigger">Text-Text-Text</span> 
 
    <span class="bigger">Text-Text-Text</span> 
 
</div> 
 
No margin

---

:

Answer 1

span은 인라인 요소이고 margin-top/bottom은 인라인 요소에서 작동하지 않으므로 inline-level block container element으로 지정해야합니다.

인라인 블록

이 값은 인라인 레벨 블록 컨테이너를 생성하는 요소를 야기한다. 인라인 블록의 내부는 블록 상자로 형식화되며 요소 자체는 원자 수준의 인라인 수준 상자로 서식이 지정됩니다.

body { 
 
    font-family: Gill Sans, Gill Sans MT, Calibri, sans-serif; 
 
    background-color: #f0f0f0; 
 
} 
 
span.bigger { 
 
    display: inline-block; 
 
    font-size: 1.5em; 
 
    margin:10px; 
 
    background-color: white; 
 
    padding: 5px; 
 
}

<div id="content"> 
 
    <span class="bigger">Text-Text-Text</span> 
 
    <span class="bigger">Text-Text-Text</span> 
 
    <span class="bigger">Text-Text-Text</span> 
 
    <span class="bigger">Text-Text-Text</span> 
 
    <span class="bigger">Text-Text-Text</span> 
 
    <span class="bigger">Text-Text-Text</span> 
 
    <span class="bigger">Text-Text-Text</span> 
 
    <span class="bigger">Text-Text-Text</span> 
 
    <span class="bigger">Text-Text-Text</span> 
 
    <span class="bigger">Text-Text-Text</span> 
 
    <span class="bigger">Text-Text-Text</span> 
 
    <span class="bigger">Text-Text-Text</span> 
 
</div> 
 
No margin