[CSS] Inline elements VS Block elements
CSS에는 블록 박스와 인라인 박스가 있다.
📁 Block elements
한줄에 하나의 요소만 포함 할 수 있는 HTML 요소.
p, h1-h6, ul, ol, div, blockquote, form, hr, table, figure
1.기본 너비값이 100%
이다.(폼요소 제외)
2.width와 height 속성
을 사용할 수 있다.
3.패딩과 마진, 보더 속성을 사용
할 수 있다.
<h4 class="one">오늘도</h4>
<h2 class="two">내일도</h2>
<h1 class="four">즐거운코딩</h1>
.one {
background-color: pink;
}
.two {
background-color: pink;
}
.four {
background-color: pink;
}
📁 Inline elements
한줄에 여러 요소를 포함 할 수 있는 HTML 요소.
img, br, sub, span, input, label, a, button
1.기본 너비값이 컨텐츠 너비값
이다.
2.width와 height 속성을 사용할 수 없다.
3.패딩과 보더 속성을 사용할 수 있지만 마진 속성은 좌우만 조절할 수 있다.
<span class="one">오늘도</span>
<span class="two">내일도</span>
<span class="four">즐거운코딩</span>
.one {
background-color: pink;
}
.two {
background-color: pink;
}
.four {
background-color: pink;
}
Author And Source
이 문제에 관하여([CSS] Inline elements VS Block elements), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@uni/CSS-Inline-elements-VS-Block-elements저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)