영벨롭 개발 일지

[CSS]margin과 padding: 박스 외부, 내부 여백 본문

Front-end/HTML & CSS

[CSS]margin과 padding: 박스 외부, 내부 여백

영벨롭 2022. 4. 5. 18:46

 박스 포스팅(https://iridescent-zeal.tistory.com/95?category=1261251)에서 박스를 다루는 몇 가지 방법을 살펴보았습니다. 

 

 오늘은 박스의 구성하는 것들 중 margin과 padding을 자세히 살펴보겠습니다.

 

 

Margin 과 padding

 

 margin은 박스 요소와 웹 페이지 사이의 여백 즉, 요소의 외부 여백을 지정하는 단축 속성입니다. 

 

 padding은 요소의 내부 여백을 지정하는 단축 속성입니다. 

 

 속성 값으로는 다음과 같은 값들을 지정할 수 있습니다. 

 

 (아래 설명은 padding에도 동일합니다.)

속성 값 설명
0 외부 여백 없음
auto  브라우저가 여백을 계산
단위 px, em, vw 등
% 부모 요소의 가로 너비에 대한 비율로 지정

 

 margin과 padding은 요소의 외부 여백을 지정하는 개별 속성이 있습니다. 여백을 한 번에 지정할수도, 특정 방향으로만 지정할 수도 있습니다. 

속성 설명
margin 요소의 위/아래/왼/오른쪽 마진 한꺼번에 
margin-top 요소의 바깥 위쪽 마진
margin-bottom 요소의 바깥 아래쪽 마진
margin-left 요소의 바깥 왼쪽 마진
margin-right 요소의 바깥 오른쪽 마진

 

 위에서 언급한 단축 속성이란 margin의 속성값으로 주어지는 값의 개수에 따라 단축 키처럼 마진을 지정할 수 있는 속성인데요!

 

margin의 단축속성
margin: 상하좌우
margin: 상하 좌우
margin: 상 좌우 하
margin: 상 우 하 좌 (시계방향)

 

예시 설명
margin: 10px; 상하좌우 모두 10px 마진
margin: 10px 20px; 상하는 10px 좌우는 20px 마진
margin: 10px 20px 30px; 상 10px, 좌우 20px, 하 30px 마진
margin: 10px 20px 30px 40px; 상 10px, 우 20px, 하 30px, 좌 40px 마진

 

<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
</body>

 

div {
  width: 200px;
  height: 100px;
  background-color: skyblue;
}

.box1 {
  margin: 30px 50px 30px 50px; /*상 우 하 좌*/
}

.box2 {
  margin: 30px 50px; /*상하 좌우*/
}

.box3 {
  margin: 50px; /*상하좌우*/
}

.box4 {
  margin: 30px 5px 10px; /*상 좌우 하*/
}

반응형
저작자표시 비영리 변경금지

'Front-end > HTML & CSS' 카테고리의 다른 글

[CSS]레이아웃 Layout: float, flexbox, grid  (0) 2022.04.06
[CSS]박스 모델 Box Model: width, height, box-sizing, display 속성  (0) 2022.04.06
[CSS] float속성과 overflow hidden속성 : 블록 요소 한 줄에 정렬하기  (0) 2022.03.31
[CSS]박스 갖고 놀기: 박스 테두리, 박스 크기, 박스 가운데 정렬, 박스 그림자  (0) 2022.03.30
[CSS]선택자 우선순위: 점수 매기기  (0) 2022.03.29
'Front-end/HTML & CSS' Related Articles more