SPAN 대 DIV (인라인 블록)
웹 페이지를 레이아웃하는 데 <div style="display:inline-block">대신 사용할 이유가 <span>있습니까?
범위 내에 중첩 된 내용을 넣을 수 있습니까? 유효하고 무엇이 아닌가?
이것을 사용하여 레이아웃과 같은 3x2 테이블을 만들 수 있습니까?
<div>
<span> content1(divs,p, spans, etc) </span>
<span> content2(divs,p, spans, etc) </span>
<span> content3(divs,p, spans, etc) </span>
</div>
<div>
<span> content4(divs,p, spans, etc) </span>
<span> content5(divs,p, spans, etc) </span>
<span> content6(divs,p, spans, etc) </span>
</div>
표시되는 HTML 명세에 따르면 , <span>인라인 요소 및 <div>블록 요소이다. 이제 displayCSS 속성을 사용하여 변경할 수 있지만 한 가지 문제가 있습니다 .HTML 유효성 검사 측면에서 블록 요소를 인라인 요소 안에 넣을 수 없습니다.
<p>...<div>foo</div>...</p>
당신이를 변경하는 경우에도 엄격 유효하지 않습니다 <div>에 inline나 inline-block.
당신의 요소 인 경우, 그래서, inline또는 inline-block를 사용합니다 <span>. 그것은 만약 block레벨 요소가하는을 사용합니다 <div>.
유효한 xhtml 문서를 원한다면 단락 안에 div를 넣을 수 없습니다.
또한 속성 표시 : 인라인 블록이있는 div는 범위와 다르게 작동합니다. 범위는 기본적으로 인라인 요소이므로 너비, 높이 및 블록과 관련된 기타 속성을 설정할 수 없습니다. 반면에 인라인 블록 속성을 가진 요소는 여전히 주변 텍스트와 함께 "흐르게"되지만 너비, 높이 등과 같은 속성을 설정할 수 있습니다. 속성 display : block을 사용하는 범위 는 같은 방식으로 흐르지 않습니다. 인라인 블록 요소로 표시되지만 캐리지 리턴을 작성하고 기본 여백이 있습니다.
모든 브라우저에서 인라인 차단이 지원되는 것은 아닙니다. 예를 들어 Firefox 2 이하에서는 다음을 사용해야합니다.
display: -moz-inline-stack;
FF3의 인라인 블록 요소와 약간 다르게 표시됩니다.
크로스 브라우저 인라인 블록 요소를 만드는 방법에 대한 훌륭한 기사가 있습니다 .
인라인 블록은 요소의 디스플레이를 인라인 또는 블록으로 설정하는 중간 지점입니다. display : inline처럼 문서의 인라인 흐름에 요소를 유지하지만 display : block과 같이 요소의 상자 속성 (너비, 높이 및 세로 여백)을 조작 할 수 있습니다.
인라인 요소 내에 블록 요소를 사용해서는 안됩니다. 이것은 유효하지 않으며 그러한 관행을 수행 할 이유가 없습니다.
나는이 Q가 오래되었다는 것을 알고 있지만 SPAN 대신 모든 DIV를 사용하지 않는 이유는 무엇입니까? 그러면 모든 것이 함께 행복해집니다.
예:
<div>
<div> content1(divs,p, spans, etc) </div>
<div> content2(divs,p, spans, etc) </div>
<div> content3(divs,p, spans, etc) </div>
</div>
<div>
<div> content4(divs,p, spans, etc) </div>
<div> content5(divs,p, spans, etc) </div>
<div> content6(divs,p, spans, etc) </div>
</div>
다른 사람들이 대답했듯이… div“블록 요소”(현재 흐름 내용으로 재정의 )이며 span“인라인 요소”( 구문 내용 )입니다. 예, 이러한 요소의 기본 표현을 변경할 수 있지만 "흐름"과 "블록"및 "구"와 "인라인"사이에는 차이가 있습니다.
흐름 내용으로 분류 된 요소 는 흐름 내용이 예상되는 곳에서만 사용될 수 있고 , 표현 내용으로 분류 된 요소 는 표현 내용이 예상되는 곳에 사용될 수 있습니다. 모든 문구 내용 은 흐름 내용이므로, 흐름 내용이 예상되는 곳이면 어디든지 문구 요소를 사용할 수 있습니다. 사양은 더 자세한 정보를 제공합니다 .
모든 말씨의 같은 요소, strong그리고 em, 수 만 다른 말씨 요소를 포함 : 당신이를 넣을 수 없습니다 table돌며 cite예를 들면. 대부분이 같은 내용의 흐름 div과 li흐름 모든 유형의 콘텐츠를 포함 할 수 있습니다 (물론 컨텐츠를 같이 분석 등),하지만 몇 가지 예외가 있습니다 p, pre그리고 th비 같이 분석 흐름 콘텐츠의 예는 수 ( "블록 요소")입니다 만 말씨를 포함 내용 ( "인라인 요소"). 물론 같은 일반적인 요소 제한이 dl및 table특정 요소를 포함하도록 허용하고는.
이 두 가지 방법 모두 div하고 p있는 흐름의 내용을 비 같이 분석의이 div(을 포함한 다른 흐름 컨텐츠의 아이로 포함 할 수 있습니다 div들과 p들). 다른 한편으로, p표현 콘텐츠 만 포함 할 수 있습니다. 즉 , 둘 다 구문이 아닌 흐름 요소이지만 div내부를 넣을 수 없습니다 p.
이제 키커가 있습니다. 이러한 의미 사양은 요소가 표시되는 방법과 관련이 없습니다. 당신이있는 경우에 따라서, div내부 a를 span, 당신은 당신이 경우에도 유효성 검사 오류가 발생합니다 span {display: block;}그리고 div {display: inline;}당신의 CSS한다.
"display : inline-block"이 유용한 이유를 이해하기 위해 인라인 요소 (예 : 스팬)와 블록 요소 (예 : div)의 기본 차이점을 이해하는 데 도움이 될 것입니다.
문제 : 인라인 요소 (예 : 스팬, a, 버튼, 입력 등)는 가로가 아닌 세로 (여백-왼쪽 및 여백-오른쪽)에서만 "여백"을 가져옵니다. 수직 간격은 블록 요소에서만 작동합니다 (또는 "display : block"이 설정된 경우).
해결책 : "디스플레이 : 인라인 블록"을 통해서만 수직 거리 (상단 및 하단)를 사용합니다. 이유 : 인라인 요소 스팬, 이제 외부의 블록 요소처럼 작동하지만 내부의 인라인 요소처럼 작동합니다.
여기 코드 예제들 :
/* Inlineelement */
div,
span {
margin: 30px;
}
span {
outline: firebrick dotted medium;
background-color: antiquewhite;
}
span.mitDisplayBlock {
background: #a2a2a2;
display: block;
width: 200px;
height: 200px;
}
span.beispielMargin {
margin: 20px;
}
span.beispielMarginDisplayInlineBlock {
display: inline-block;
}
span.beispielMarginDisplayInline {
display: inline;
}
span.beispielMarginDisplayBlock {
display: block;
}
/* Blockelement */
div {
outline: orange dotted medium;
background-color: deepskyblue;
}
.paddingDiv {
padding: 20px;
background-color: blanchedalmond;
}
.marginDivWrapper {
background-color: aliceblue;
}
.marginDiv {
margin: 20px;
background-color: blanchedalmond;
}
</style>
<style>
/* Nur für das w3school Bild */
#w3_DIV_1 {
bottom: 0px;
box-sizing: border-box;
height: 391px;
left: 0px;
position: relative;
right: 0px;
text-size-adjust: 100%;
top: 0px;
width: 913.984px;
perspective-origin: 456.984px 195.5px;
transform-origin: 456.984px 195.5px;
background: rgb(241, 241, 241) none repeat scroll 0% 0% / auto padding-box border-box;
border: 2px dashed rgb(187, 187, 187);
font: normal normal 400 normal 15px / 22.5px Lato, sans-serif;
padding: 45px;
transition: all 0.25s ease-in-out 0s;
}
/*#w3_DIV_1*/
#w3_DIV_1:before {
bottom: 349.047px;
box-sizing: border-box;
content: '"Margin"';
display: block;
height: 31px;
left: 0px;
position: absolute;
right: 0px;
text-align: center;
text-size-adjust: 100%;
top: 6.95312px;
width: 909.984px;
perspective-origin: 454.984px 15.5px;
transform-origin: 454.984px 15.5px;
font: normal normal 400 normal 21px / 31.5px Lato, sans-serif;
}
/*#w3_DIV_1:before*/
#w3_DIV_2 {
bottom: 0px;
box-sizing: border-box;
color: black;
height: 297px;
left: 0px;
position: relative;
right: 0px;
text-decoration: none solid rgb(255, 255, 255);
text-size-adjust: 100%;
top: 0px;
width: 819.984px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 409.984px 148.5px;
transform-origin: 409.984px 148.5px;
caret-color: rgb(255, 255, 255);
background: rgb(76, 175, 80) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(255, 255, 255);
font: normal normal 400 normal 15px / 22.5px Lato, sans-serif;
outline: rgb(255, 255, 255) none 0px;
padding: 45px;
}
/*#w3_DIV_2*/
#w3_DIV_2:before {
bottom: 258.578px;
box-sizing: border-box;
content: '"Border"';
display: block;
height: 31px;
left: 0px;
position: absolute;
right: 0px;
text-align: center;
text-size-adjust: 100%;
top: 7.42188px;
width: 819.984px;
perspective-origin: 409.984px 15.5px;
transform-origin: 409.984px 15.5px;
font: normal normal 400 normal 21px / 31.5px Lato, sans-serif;
}
/*#w3_DIV_2:before*/
#w3_DIV_3 {
bottom: 0px;
box-sizing: border-box;
height: 207px;
left: 0px;
position: relative;
right: 0px;
text-size-adjust: 100%;
top: 0px;
width: 729.984px;
perspective-origin: 364.984px 103.5px;
transform-origin: 364.984px 103.5px;
background: rgb(241, 241, 241) none repeat scroll 0% 0% / auto padding-box border-box;
font: normal normal 400 normal 15px / 22.5px Lato, sans-serif;
padding: 45px;
}
/*#w3_DIV_3*/
#w3_DIV_3:before {
bottom: 168.344px;
box-sizing: border-box;
content: '"Padding"';
display: block;
height: 31px;
left: 3.64062px;
position: absolute;
right: -3.64062px;
text-align: center;
text-size-adjust: 100%;
top: 7.65625px;
width: 729.984px;
perspective-origin: 364.984px 15.5px;
transform-origin: 364.984px 15.5px;
font: normal normal 400 normal 21px / 31.5px Lato, sans-serif;
}
/*#w3_DIV_3:before*/
#w3_DIV_4 {
bottom: 0px;
box-sizing: border-box;
height: 117px;
left: 0px;
position: relative;
right: 0px;
text-size-adjust: 100%;
top: 0px;
width: 639.984px;
perspective-origin: 319.984px 58.5px;
transform-origin: 319.984px 58.5px;
background: rgb(191, 201, 101) none repeat scroll 0% 0% / auto padding-box border-box;
border: 2px dashed rgb(187, 187, 187);
font: normal normal 400 normal 15px / 22.5px Lato, sans-serif;
padding: 20px;
}
/*#w3_DIV_4*/
#w3_DIV_4:before {
box-sizing: border-box;
content: '"Content"';
display: block;
height: 73px;
text-align: center;
text-size-adjust: 100%;
width: 595.984px;
perspective-origin: 297.984px 36.5px;
transform-origin: 297.984px 36.5px;
font: normal normal 400 normal 21px / 73.5px Lato, sans-serif;
}
/*#w3_DIV_4:before*/ <h1> The Box model - content, padding, border, margin</h1>
<h2> Inline element - span</h2>
<span>Info: A span element can not have height and width (not without "display: block"), which means it takes the fixed inline size </span>
<span class="beispielMargin">
<b>Problem:</b> inline elements (eg span, a, button, input etc.) take "margin" only vertically (margin-left and margin-right)
on, not horizontal. Vertical spacing works only on block elements (or if display: block is set) </span>
<span class="beispielMarginDisplayInlineBlock">
<b>Solution</b> Only through
<b> "display: inline-block" </ b> will also take the vertical distance (top and bottom). Reason: Inline element Span,
behaves now like a block element to the outside, but like an inline element inside</span>
<span class="beispielMarginDisplayInline">Example: here "display: inline". See the margin with Inspector!</span>
<span class="beispielMarginDisplayBlock">Example: here "display: block". See the margin with Inspector!</span>
<span class="beispielMarginDisplayInlineBlock">Example: here "display: inline-block". See the margin with Inspector! </span>
<span class="mitDisplayBlock">Only with the "Display" -property and "block" -Value in addition, a width and height can be assigned. "span" is then like
a "div" block element. </span>
<h2>Inline-Element - Div</h2>
<div> A div automatically takes "display: block." </ div>
<div class = "paddingDiv"> Padding is for padding </ div>
<div class="marginDivWrapper">
Wrapper encapsulates the example "marginDiv" to clarify the "margin" (distance from inner element "marginDiv" to the text)
of the outer element "marginDivWrapper". Here 20px;)
<div class = "marginDiv"> margin is for the margins </ div>
And there, too, 20px;
</div>
<h2>w3school sample image </h2>
source:
<a href="https://www.w3schools.com/css/css_boxmodel.asp">CSS Box Model</a>
<div id="w3_DIV_1">
<div id="w3_DIV_2">
<div id="w3_DIV_3">
<div id="w3_DIV_4">
</div>
</div>
</div>
</div>참고 URL : https://stackoverflow.com/questions/1611065/span-vs-div-inline-block
'programing tip' 카테고리의 다른 글
| Java에서 메모리를 비우는 방법? (0) | 2020.06.25 |
|---|---|
| iPhone 데이터 사용량 추적 / 모니터링 (0) | 2020.06.25 |
| 힘내 : 병합 커밋의 메시지를 편집 / 변경하는 방법은 무엇입니까? (0) | 2020.06.25 |
| jQuery document.ready 대 자체 호출 익명 함수 (0) | 2020.06.25 |
| 채널을 열어 두어도 되나요? (0) | 2020.06.25 |