[Web] CSS 적용시 상하좌우 순서

<분류>
A. 수단
- OS/Platform/Tool : Linux, Kubernetes(k8s), Docker, AWS
- Package Manager : node.js, yarn, brew, 
- Compiler/Transpillar : React, Nvcc, gcc/g++, Babel, Flutter
- Module Bundler  : React, Webpack, Parcel

B. 언어
- C/C++, python, Javacsript, Typescript, Go-Lang, CUDA, Dart, HTML/CSS

C. 라이브러리 및 프레임워크 및 SDK
- OpenCV, OpenCL, FastAPI, PyTorch, Tensorflow, Nsight

 

---

1. What? (현상)

padding: 12px 5px 10px 20px;
margin: 10px 50px 20px 0;

 

padding과 margin의 경우 상하좌우의 어떤 순서인지가 궁금했습니다.

[Padding과 Margin]

 

---

2. Why? (원인)

• 원래는 top, right, bottom, left를 나눠서 정의 가능합니다.
  • margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px;
    margin-left: 40px;
  • padding-top:10px;
    padding-right:20px;
    padding-bottom:15px;
    padding-left:30px

---

3. How? (해결책)

• 4개인 경우에 top, right, bottom, left 
  ex) margin: 10px 20px 30px 40px;
• 3개인 경우에 top, (right와 left), bottom
  ex) margin: 10px 20px 30px;
• 2개인 경우에 (top과 bottom), (right와 left)
  ex) margin: 10px 20px;
• 1개인 경우에 모든 값
  ex) margin: 10px;

---