여백 ( margin )
써져있는 요소 주변에 공간을 만드는데 사용
margin칸 주변으로 70px의 공간이 생김
div {
margin: 70px;
border: 1px solid #4CAF50;
}
글 주변에 있는 여백을 없애고자 할 때
아래쪽에만 35px의 공간이 생기고 나머지 부분에는 생기지 않음
h1 {
margin : 0 0 35px 0
}
여백 style
auto : 브라우저가 여백을 계산해 자동으로 여백 지정
//사이트의 크기가 달라져도 즉시 가운데로 맞춰짐
inherit (상속) : 상속받은 만큼 지정
//상위 요소에 상속되어짐
길이 (px,in,cm...) : 지정한 길이 만큼 지정
--% : 지정한 %만큼 지정
방향 : top, bottom, right, left
패딩 ( padding )
margin안에 있는 border 안의 padding의 공간을 지정
너비를 300으로 정하고 그 안에 공간을 padding으로 정의
p {
width : 250px;
padding : 150px;
}
높이 / 너비 ( height / width )
높이 150% , 너비 100%로 지정
p{
height : 150%;
width : 100%;
background-color : lughtred;
}
높이 / 너비 style
auto : 브라우저의 크기에 맞춰 자동으로 조절
% : 지정한 %만큼 조절
length (px, in, cm ...) : 지정한 길이에 맞춰 조절
initial : 기본값
inherit : 상속값
max-(height / width) : 높이와 너비의 최대값을 지정
min-(height / width) : 높이와 너비의 최소값을 지정
- max와 min은 일반 height보다 높은 우선순위를 가지고 있다.
개발자 지망생