1. padding
- contents 와 border 사이에 생기는 영역
padding: top right bottom left;2. border
- 테두리
border: 5px solid black;border: 두께 선스타일 선색깔;
- text-decoration: underline; 은 밑줄을 커스터마이징 하기 어렵기 때문에 border-bottom 을 사용하여 내가 원하는 스타일로 밑줄을 칠 수 있다.
- 선 스타일의 종류로는 dotted, dashed, double, solid 등이 있다.
3. margin
- border 외부에 생기는 여백
margin: top right bottom left;4. margin auto
- div 태그처럼 블록 요소일때 width 값을 주면 content(내용)가 차지하는 영역이 더 이상 늘어나지 않게 된다. 이때 margin에 auto로 설정하면 가로 중앙에 오게할 수 있다.
.center{
width: 150px;
margin: 20px auto;
}- margin값이 두개만 있을 경우 첫번째는 위,아래의 margin이고 두번째는 왼쪽, 오른쪽에 주는 margin이다.
- 가로 중앙에 배치하며, 좌우 공간은 균등하게 배분되어 여백을 갖게된다.
- box-sizing
머리속으로 패딩을 계산해가며 최정적으로 width가 얼마인지 안 후에 css를 적용하기 불편하므로
padding과 border를 전체 가로와 세로 길이에 포함하도록 적용한다.
-
거의 대부분의 웹페이지에 box-sizing 프로퍼티를 기본으로 적용
-
모든 태그에 이 프로퍼티가 적용되어야 하는데 일일히 태그마다 적용하기에는 코드가 길어지므로
(* )selector로 모든 태그에 적용한다
*{
box-sizing: border-box;
}