코드 여행 일기

박스모델 2편, margin padding 다루기 본문

CSS

박스모델 2편, margin padding 다루기

할짝개발자 2023. 9. 24. 19:02
728x90
반응형

 

padding 과 margin

 

 

다양한 경우의 수

여백은 상하좌우 네 개의 면에 존재하는 영역이다.

작성자는 각 면에 개별적으로 두께를 정의할 수 있다

이를 위해 다음 두 가지 방법을 사용한다.

  • 하위 속성 정의하기
  • 여러 값을 한 번에 정의하기

 

하위 속성 정의하기

상하좌우 여백을 정의할 수 있는 개별 속성들이 있다

⇒ margin 에도 동일한 접미사를 붙여 개별 정의할 수 있다.

     ex)margin-top, margin-left

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>안녕하세요</title>
    <style>
        div{ border: 5px solid red; 
            width: 100px; height: 100px;
            padding: 10px;
            margin: 20px;
            padding-top: 10px;
            padding-right: 20px;
            padding-bottom: 30px;
            padding-left: 40px;
            margin-top: 10px;
            margin-right: 20px;
            margin-bottom: 30px;
            margin-left: 40px;}
    </style>
</head>
<body>
   <div></div>
</body>
</html>

전체 적용
전체 적용 사용
상하좌우 각각 여백을 주었을 경우

초록 padding 주황 margin

여러 값을 한 번에 정의하기

padding 과 margin은 네 면의 여백에 대한 단축 속성이다.

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>안녕하세요</title>
    <style>
        div{ border: 5px solid red; 
            width: 100px; height: 100px;
            padding: 10px 20px 30px 40px;
            margin: 20px;}
    </style>
</head>
<body>
   <div></div>
</body>
</html>

전체 적용 사용

2개 적용 했을 경우
상하 10px, 좌우 20px

3개 적용 했을 경우
상 10px, 좌우 20px, 하 30px

4개 적용 했을 경우
시계 방향으로 10px, 20px, 30px, 40px

 

 

 

위 글은 유튜브 유노코딩 영상을 정리하여 쓴 글 입니다.

 

728x90
반응형

'CSS' 카테고리의 다른 글

박스모델 3편, box-sizing  (0) 2023.09.24
박스모델 1편, 박스모델 소개  (0) 2023.09.22
블록 레벨 요소 vs 인라인 요소  (0) 2023.09.22
CSS 텍스트 꾸미기 속성  (0) 2023.07.28
CSS 선택자 1  (0) 2023.07.21
'CSS' Related Articles more