CSS의 외부 여백(margin), 내부 여백(padding)
CSS의 외부 여백(margin)
요소의 외부 여백(공간)을 지정하는 단축 속성, 음수를 사용할 수 있음. 서로를 밀어내는 값
요소의 외부 여백(공간)을 지정하는 단축 속성, 음수를 사용할 수 있음. 서로를 밀어내는 값
기본값, 0 : 외부 여백 없음
auto : 브라우저가 여백을 계산. (가로,세로 너비가 있는 요소의 가운데 정렬에 활용)
단위 : px, em, vw , % 등 단위로 지정
.container .item {
width: 100px;
height: 100px;
background-color: orange;
margin: 20px;
/* margin-bottom: 20px; margin-top, margin-bottom, margin-left, margin-right*/
}
-
단축 속성
margin : 10px;
= top ,right, bottom, leftmargin : 10px 20px;
= top, bottom(상하) / left,right(좌우)margin : 10px 20px 30px;
= top(상) / left,right(중) / bottom(하)margin : 10px 20px 30px 40px;
= top ,right, bottom, left
-
음수 : 겹쳐지는 효과
CSS의 내부 여백(padding)
요소의 내부여백(공간)을 지정하는 단축 속성, 요소의 크기가 커짐
요소의 내부여백(공간)을 지정하는 단축 속성, 요소의 크기가 커짐
기본값, 0 : 내부 여백 없음
단위 : px, em, vw 등 단위로 지정
% : 부모 요소의 가로 너비에 대한 비율로 지정
Author And Source
이 문제에 관하여(CSS의 외부 여백(margin), 내부 여백(padding)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kingggyu/CSS의-외부-여백margin-내부-여백padding저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)