CSS - display 속성-block, inline,block-inline

CSS에는 display라는 속성이 있습니다.

 

display는 요소가 보여지는 방식을 지정해주는 속성입니다.

 

html요소는 기본적으로

display: block과 display: inline 요소를 가지고 있는데요.

 

1. display

display: none	display: block	display: inline	display: inline-block
공간을 차지않음, 즉 화면에 아무것도 보여지지 않음	한 줄을 다 너비로 차지함	content만큼만 너비를 가짐	content만큼만 너비를 가짐
	<div>, <h1>~<h6>, <p> 등	<a>, <span>, <img>
	width, height, margin, padding 가능	width, height, margin-top, margin-bottom 불가능 (속성을 지정해도 무시가 됨)	width, height, margin-top, margin-bottom 가능
			=> 다음줄로 넘어가지 않으면서 너비를 줄 수 있음!

1) block과 inline 비교

<div class="block">block</div>
<span class="inline">inline</span>

.block{
            background-color: aqua;
        }
.inline{
            background-color: green;
        }

.block{
            background-color: aqua;
            width:100px;
            height:100px;
        }
.inline{
            background-color: green;
            width:100px;
            height:100px;
        }

<span class="inline-block">inline</span>

.inline-block{
            display:inline-block;
            background-color: rgb(166, 216, 166);
            width:100px;
            height:100px;
        }