[CSS] <span> 요소 줄 바꿈 하기

<span> 요소 줄 바꿈 하기

들어가며

• 여러 개의 <span> 요소를 작성할 경우, 한 줄에 모두 표시되게 된다.

<div id="test">
    <span id="s1">Element 1</span>
    <span id="s2">Element 2</span>
    <span id="s3">Element 3</span>
</div>

Element 1 Element 2 Element 3

 

• 간단하게 CSS 속성을 적용하여 이러한 <span> 요소가 한 줄마다 표시되도록 할수 있다.

 

방법

• 부모 요소와 자식 요소에 모두  display: block;  속성을 적용시켜준다.

<div id="test">
    <span id="s1">Element 1</span>
    <span id="s2">Element 2</span>
    <span id="s3">Element 3</span>
</div>

#test {
    display: block;
}

#s1 {
    display: block;
}

#s2 {
    display: block;
}

#s3 {
    display: block;
}

 

테스트

See the Pen Untitled by Sangsoon Kim (@starrykss) on CodePen.

 

참고 사이트

https://stackoverflow.com/questions/6987834/how-to-make-an-inline-element-appear-on-new-line-or-block-element-not-occupy-th

How to make an inline element appear on new line, or block element not occupy the whole line?