CSS에서 height와 width 속성을 설정할 때 그 크기가 가르키는 부분은 내용(content) 부분만을 대상으로 한다.
HTML 요소의 height와 width 속성으로 설정된 높이와 너비에 패딩(padding), 테두리(border), 마진(margin)의 크기는 포함되지 않는다,
그러기 때문에 요소들 마다 값을 지정해줘야 된다
* 익스플로러 8과 그 이전 버전에서는 width나 height를 지정할때 요소값도 포함되어 지정 되었었다,
이러한 차이점을 없애기 위해서는 반드시 HTML문서에 <!DOCTYPE html>태그를 삽입해야만 한다.
margin 특성상 backgrund 속성을 가지지 못하기 때문에 요소의 컨텐츠가 서로 떨어져 보이게 되는데
요소를 다른 요소의 위에 겹치게 하기 위해선 margin의 속성값을 음수로 설정하면 가능해진다.
#A{
background-color: yellow;
text-align: center;
width: 500px;
padding: 10px;
border: 20px solid maroon;
margin: 30px;
}
#B{
background-color: pink;
text-align: center;
width: 500px;
padding: 10px;
border: 20px solid maroon;
margin: 30px;
margin-top: -29px;
}
- margin 속성값을 inherit로 설정하면, 부모(parent) 요소의 margin 속성값을 그대로 물려받게된다.
- margin도 축약 표현이 가능하다 { margin: 20px 50px 30px 50px }
4개의 margin 속성값을 가질 때는 top, right, bottom, left 순으로 설정합니다. ex) margin: 10px 20px 30px 40px;
css요소 중 패딩(padding), 테두리(border), 마진(margin), 내용(content) 외로 한가지 옵션을 줄 수 있는 것이 존재한다.
바로 outline 요소이다, outline 요소는 border의 속성값을 가질 수 있다.
outline 요소는 boder 밖의 위치 하게 되는데 border 요소와는 달리 HTML 요소의 전체 크기에는 포함되지 않습니다.
border 선을 표시한다면, border 너비가 레이아웃에 관여하기 때문에 레이아웃이 흐트러질 수 있지만 outline 선의
넓이는 레이아웃에 관여하지 않고 눈에만 보이기된다
outline은 주로 레이아웃을 완성훈 후에 문제점을 보기 위해 요소를 눈에 띄게 표시하기 위해 사용된다.
자료출처 : https://aboooks.tistory.com/228, http://tcpschool.com/css/css_boxmodel_outline