block element
특징
가로폭 전체의 넓이를 가지는 직사각형 형태
- 블록요소는 vertical-align이 적용되지 않는다.
- 블록요소는 text-align이 적용되지 않는다.
HTML 5 블록요소의 종류
address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, noscript, ol, output, p, pre, section, table, ul, video
inline element
특징
컨텐츠가 가지는 지점까지의 넓이를 가진다.
- 인라인요소는 height가 적용되지 않는다
- 인라인요소는 width가 적용되지 않는다.
HTML5의 인라인 요소 종류
a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, small, script, select, span, strong, sub, sup, textarea, tt, var
test 이미지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
background : gray;
margin-top: 22px;
}
span{
background: green;
margin-top: 22px;
}
</style>
<body>
<div>Block element 1</div>
<div>Block element 2</div>
<span>inline element 1</span>
<span>inline element 2</span>
</body>
</html>
개발로그