반응형
margin padding 둘 다 여백을 만들어내지만, 만드는 위치가 다르다.
바깥 여백 : margin
안쪽 여백 : padding
1. 특정 위치 지정
margin-"위치", padding-"위치" 형식으로 사용 가능
"위치" 자리에는 top, bottom, left, right 값이 들어갈 수 있음
margin-top : 10px
2. 수치 나열
위치 지정 없이 값을 쭉 나열해도 상관없음.
순서는 상, 우, 하, 좌 (시계방향)
margin : 10px #상하좌우 모두 10px 여백
margin: 10px 20px #상하 10px, 좌우 20px 여백
margin: 10px 20px 30px 40px #상 10px, 우 20px, 하 30px, 좌 40px
margin: 10px 20px 30px #상 10px, 좌우 20px, 하 30px
예제)
<html>
<head>
<style>
.test{
display: inline-block;
background-color: #A5FFE4;
border: 1px solid #09c;
margin: 10px 20px;
}
.test div{
width: 150px;
height: 150px;
background-color: #FAFAD2;
border: 1px solid #90C;
font-size: 15px;
}
#test1{ margin: 10px; padding: 0px; }
#test2{ margin: 10px 20px; padding: 0px; }
#test3{ margin: 10px; padding: 10px 20px; }
#test4{ margin: 10px 20px 30px; padding: 20px 0px; }
</style>
</head>
<body>
<div class="test">
<div id="test1">margin: 10<br>padding: 0</div>
</div>
<div class="test">
<div id="test2">margin: 10 20<br>padding: 0</div>
</div>
<div class="test">
<div id="test3">margin: 10<br>padding: 10 20</div>
</div>
<div class="test">
<div id="test4">margin: 10 20 30<br>padding: 20 0</div>
</div>
</body>
</html>
margin: 10
padding: 0
padding: 0
margin: 10 20
padding: 0
padding: 0
margin: 10
padding: 10 20
padding: 10 20
margin: 10 20 30
padding: 20 0
padding: 20 0
반응형
'공부' 카테고리의 다른 글
| frida-server 탐지 방지 빌드 (0) | 2022.04.02 |
|---|---|
| 서브 도메인 수집 도구 Sublist3r (2) | 2022.03.25 |
| 네이버 웹 마스터 도구 - 사이트의 수집 현황을 점검해 주세요? (0) | 2022.03.13 |
| 안드로이드 adb settings value 확인, 변경 (0) | 2022.03.10 |
| bank 파일 추출하기 (웨이브 파일 추출) (3) | 2022.03.09 |