[CSS] display _ inline vs block

16763 단어 CSSTILCSS

display

display 속성에서 지정할 수 있는 값은 block, inline, inline-block 이렇게 세 가지가 있다. 이 속성을 통해 요소의 성격을 지정할 수 있다.

display : block

기본적인 속성에서 width: 100%이므로 한 줄 전체를 차지하게 된다.
⚡️ width, height, margin, padding 값을 모두 지정할 수 있다.
⚡️ block 속성을 가진 요소 : div, h1, p, li, section

.inline-block{
	display: block;

	/* ⭕️ 사용 가능 */
	width: 1000px; 
	height: 1000px;
	margin-top: 20px;
	padding-bottom: 20px;
	margin-left:10px;
	padding-right10px;
}

display : inline

내부의 텍스트/콘텐츠의 크기만큼 공간을 차지한다.
⚡️ width, height, margin 과 padding (위-아래)은 지정할 수 없다
⚡️ margin(좌-우) , padding (좌-우)는 가능하다.
⚡️ inline 속성을 가진 요소 :span, a, img, em, strong, i, small

.inline{
	display: inline;
	/* ❌ 사용 불가 */
	width: 1000px; 
	height: 1000px;
	margin-top: 20px;
	padding-bottom: 20px;

  /* ⭕️ 사용 가능 */
	margin-left:10px;
	padding-right10px;
	
}

display : inline-block

block속성을 가진 요소를 inline 속성처럼 콘텐츠 크기만큼만 사용할 수 있다.
⚡️ width, height, margin, padding 속성을 모두 설정하고 싶을 때 사용한다.

.inline-block{
	display: inline-block;

	/* ⭕️ 사용 가능 */
	width: 1000px; 
	height: 1000px;
	margin-top: 20px;
	padding-bottom: 20px;
	margin-left:10px;
	padding-right10px;
}

예시

코드 설명

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display</title>
    <style>
        .inline{
            display:inline; /* inline 이해를 위해 속성을 지정해줌 원래 안해줘도 됨 */
            background-color: yellowgreen;
            padding-right: 20px; /* padding, margin 좌-우만 가능 */
            margin: 10px;
        }

        .pure-block{
            background-color: aquamarine; /* div는 block속성을 가지고 있음 */
            border: 1px solid black;
        }
        .block{
            display: block; /* block 이해를 위해 속성을 지정해줌 원래 안해줘도 됨 */
            background-color: aquamarine;
            width: 100px; /* width, height 지정 모두 가능 */
            height: 100px;
            border: 1px solid black;
        }

        .inline-block{
            display: inline-block;
            background-color: bisque;
            width: 100px; /* inline-block은 block 처럼 width, height, margin, padding 모두 설정 가능 */
            height: 100px;
            border: 1px solid black;
            margin: 10px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <span class="inline">Hi I'm inline</span>
    <span class="inline">Hi I'm inline</span>
    <span class="inline">Hi I'm inline</span>
    <div class="pure-block">Hi I'm block</div>
    <div class="block">Hi I'm block</div>
    <div class="block">Hi I'm block</div>
    <div class="block">Hi I'm block</div>
    <div class="inline-block">Hi I'm inline-block</div>
    <div class="inline-block">Hi I'm inline-block</div>
    <div class="inline-block">Hi I'm inline-block</div>
</body>
</html>

출처
inline vs block

Vue.js 특징과 인스턴스
[JS] 고차함수 정복하기 2편: 예제로 알아보는 핵심 배열고차함수(반복메소드)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage