박스모델 2편 margin padding 다루기
각 면마다 개별적으로 여백의 두께 정의 가능
-
padding
- top, bottom, left, right 단축 속성 -
margin
- top, bottom, left, right 단축 속성
- margin 10px 30px; --> 상하 : 10px, 좌우 : 30px
- margin 10px 30px 20px; --> 상 : 10px, 좌우 : 30px, 하 : 20px
- margin 10px 30px 20px 40px; --> 상 : 10px 부터 시계방향
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>padding / margin</title>
<style>
div{
width: 100px;
height: 100px;
padding: 10px;
border: 5px solid red;
margin: 20px;
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
margin-top: 40px;
margin-bottom: 30px;
margin-left: 20px;
margin-right: 10px;
}
span{
display: inline-block;
width: 100px; height: 100px;
border: 5px solid red;
margin: 10px 30px 20px 40px;
}
p{
width: 100px; height: 100px;
border: 5px solid red;
padding: 10px 30px 20px 40px;
}
</style>
</head>
<body>
<div></div>
<span></span>
<p></p>
</body>
</html>
ISTJ의 재미없는 velog