"in a doctument, each element is represented as a rectangular box.
In CSS, each of these rectangular boxes is described using the standard box model.
Each box has four edges : the margin edge, border edge, padding edge, and content edge
- padding : between the border and the text(content), there's something called padding.
padding is just the space on the inside of the border. - margin : between the border on the outside and anything else.
so we use margin often to add spacing between elements.
p{
border: 2px solid blue;
width: 200px;
height: 50px;
}
이 html 페이지를 열어서 inspect를 해보면 아래의 그림을 볼 수 있음.
p즉 콘텐츠에만 width/height 값을 적용했고 때문에, element(content)에만 200*50 이라고 되어있음을 확인할 수 있음.
%
p{
border: 2px solid blue;
width: 50%;
height: 50px;
}
You might be wondering what is it 50% of,
The answer is that its 50% of the parent element.
whats nice about this if I change the window size it also changes.
창 크기를 줄이고 늘려도 그에 맞게 줄어들고 늘어남.
padding
padding-left 만 줬을 경우, 아래 그림과 같이. 아래 화면에서 오른쪽에 생기는 파란색 여백은 padding이 아님에 주의.
width를 줘서 생긴 'element'의 공간임.
그래서 inspect 했을 때 padding 을 보면
p{
border: 2px solid blue;
width: 50%;
height: 50px;
padding-left: 40px;
}
margin
p{
border: 2px solid blue;
width: 50%;
height: 50px;
padding-left: 40px;
/* margin: 100px;
margin-top: 500px;
margin: 20px 50px 10px 100px;
margin: 0 auto 0 auto;
margin: 0 auto;
margin: 50px 20px; */
}
margin의 다양한 용례
p{
border: 2px solid blue;
width: 50%;
height: 50px;
padding-left: 40px;
/* margin 상하좌우를 모두 100px로 */
margin: 100px;
/* margin의 탑만 500px로 */
margin-top: 500px;
/* (시계방향으로) top, right, bottom. left순 */
margin: 20px 50px 10px 100px;
/* margin 위아래를 0 좌우는 그냥 자동(가운데) */
margin: 0 auto 0 auto;
/* 위의 것을 줄여서 두 항목 적으면, 상하/좌우 */
margin: 0 auto;
/* 상하는 50px로 좌우는 20px로 */
margin: 50px 20px;
}
