[HTML/CSS] 여백 속성 사용법

« 2025/04 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

[HTML/CSS] 여백 속성 사용법 - padding vs margin
/category/Studynote/HTML%20%26%20CSS%20%26%20JS

2022. 6. 14. 11:57

웹사이트 프로젝트를 만들 때, 티스토리 블로그 HTML을 변경할 때, 서식을 등록할 때 등 HTML/CSS 파일을 수정할 때마다 padding과 margin의 차이, 그리고 하위 속성을 부여할 때 상/하/좌/우 순서가 늘 헷갈려 검색을 하고는 했기에 포스팅에다 정리해두고자 한다.

📌 padding vs margin

다음 그림으로 쉽게 이해할 수 있다.

출처 : 코딩팩토리 블로그 (https://coding-factory.tistory.com/187)

padding : 내부 여백. 즉, 본문 내용과 border 사이의 여백
border : 경계선 ( 선 굵기를 다양하게 지정할 수 있으며, 선을 그리지 않을 수도 있음)
margin : 외부 여백. 즉, border과 바깥과의 여백

❗

나만의 암기법 |  패딩 (추우니까 패딩 안에 껴입는다.) ↔ 마진 (마진이 남는다 : 원가 외에 이익이 남는다)

특징

여백은 px, pt, cm로 지정할 수 있다. (px가 일반적)
음수 값(Negative values)으로 지정할 수 있다.
하위 속성은 시계방향으로 상, 우, 하, 좌를 표시한다.
속성값을 auto로 설정하면 브라우저가 여백을 계산한다.
속성값을 inherit(상속)으로 설정하면 부모 요소에서 상속된다.

👉🏻 사용하기

1. 기본 사용법

1-1. CSS에서의 margin 사용하기

.box1 {
	margin: 40px;
	}

1-2. CSS에서의 margin & padding 함께 사용하기

.box2 {
	border: 5px solid brown;
        padding: 10px;
        margin: 20px;
	}

1-3. HTML 문서 내에서 style 속성을 사용하여 margin & padding 사용하기

<html>
    <head>
    	<title>margin, padding의 HTML 안에서의 사용법(in-line)</title>
    </head>
    <body>
        <h1 style="padding: 20px; margin: 40px;"> 바깥쪽 여백 20px, 안쪽 여백 40px</h1>
    </body>
</html>

2. 하위 속성 지정하기

2-1. padding과 margin 하위 속성 (상, 우, 하, 좌 - 시계방향)

padding-top : 위쪽 내부 여백
padding-right : 오른쪽 내부 여백
padding-bottom : 아래쪽 내부 여백
padding-left : 왼쪽 내부 여백

margin-top : 위쪽 외부 여백
margin-right : 오른쪽 외부 여백
margin-bottom : 아래쪽 외부 여백
margin-left : 왼쪽 외부 여백

2-2. padding & margin 여러 속성 한 번에 지정하기 (상, 우, 하, 좌 - 시계방향)

div{
    width: 200px; height; 50px;
    border: 3px solid red;
    margin: 20px 40px 60px 80px;
	}

📍

추가 규칙! 값이 좌 = 우 혹은 상 = 하일 경우, 먼저 나오는 값에 합쳐서 표시해준다.

ex: padding 좌=우 값이 40px로 같은 경우

div{
    padding: 20px 40px 80px;		/* padding: (상)  (좌=우)  (하) */
	}

참고 사이트

노니PC님 블로그 (https://nonipc.com/entry/css-%EB%B0%95%EC%8A%A4%EB%AA%A8%EB%8D%B8-2-margin-padding-%ED%95%98%EC%9C%84-%EC%86%8D%EC%84%B1#recentComments)

저작자표시

'Studynote > HTML & CSS & JS' 카테고리의 다른 글

[JS] JavaScript 입문 - Data Type (0)	2022.03.15
[JS] 자바스크립트란? (0)	2022.03.14

🌱새싹개발자

CATEGORIES

[HTML/CSS] 여백 속성 사용법 - padding vs margin
/category/Studynote/HTML%20%26%20CSS%20%26%20JS

📌 padding vs margin

특징

👉🏻 사용하기

1. 기본 사용법

1-1. CSS에서의 margin 사용하기

1-2. CSS에서의 margin & padding 함께 사용하기

1-3. HTML 문서 내에서 style 속성을 사용하여 margin & padding 사용하기

2. 하위 속성 지정하기

2-1. padding과 margin 하위 속성 (상, 우, 하, 좌 - 시계방향)

2-2. padding & margin 여러 속성 한 번에 지정하기 (상, 우, 하, 좌 - 시계방향)

ex: padding 좌=우 값이 40px로 같은 경우

'Studynote > HTML & CSS & JS' 카테고리의 다른 글

BELATED ARTICLES

NOTICE

ARCHIVE

RECENTPOST

RECENTCOMMENT

티스토리툴바

🌱새싹개발자

CATEGORIES

[HTML/CSS] 여백 속성 사용법 - padding vs margin /category/Studynote/HTML%20%26%20CSS%20%26%20JS

📌 padding vs margin

특징

👉🏻 사용하기

1. 기본 사용법

1-1. CSS에서의 margin 사용하기

1-2. CSS에서의 margin & padding 함께 사용하기

1-3. HTML 문서 내에서 style 속성을 사용하여 margin & padding 사용하기

2. 하위 속성 지정하기

2-1. padding과 margin 하위 속성 (상, 우, 하, 좌 - 시계방향)

2-2. padding & margin 여러 속성 한 번에 지정하기 (상, 우, 하, 좌 - 시계방향)

ex: padding 좌=우 값이 40px로 같은 경우

'Studynote > HTML & CSS & JS' 카테고리의 다른 글

BELATED ARTICLES

NOTICE

ARCHIVE

RECENTPOST

RECENTCOMMENT

티스토리툴바

[HTML/CSS] 여백 속성 사용법 - padding vs margin
/category/Studynote/HTML%20%26%20CSS%20%26%20JS