P.example {
width: 273px;
height: 90px;
margin: 50px;
border: 5px solid black;
padding: 50px;
}
테두리 바깥의 여백이 margin입니다.
p.example {
margin: 50px;
}
p.example {
margin: 50px 50px 50px 50px;
}
p.example {
margin-top: 50px;
margin-right: 50px;
margin-bottom: 50px;
margin-left: 50px;
}
동일한 내용의 코드
padding
테두리 안 쪽의 초록색 영역이 padding
p.example {
padding: 50px;
}
p.example {
padding: 50px 50px 50px 50px;
}```
p.example {
padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px;
}
위치를 이동시켜주는 top, right, bottom, left 프로퍼티가 있어야 원래의 위치에서 이동할 수 있음
.relative {
position: relative;
}
.top-20 {
top: -20px;
left: 30px;
}
position: absolute; 는 이름과 같이 절대적인 위치에 둘 수 있습니다.
특정 부모에 대해 절대적으로 움직이게 됩니다.
p {
margin: 0;
background-color: yellow;
}
.absolute {
position: absolute;
}
.right-0 {
right: 0;
bottom: 0;
}