CSS: Box Model

Box Model

모든 요소는 margin, border, padding의 스타일을 갖는다

주황색: margin
노랑색: border(테두리를 스타일링)
초록색: padding
파란색: 요소

박스의 실제 크기 = border + padding + 요소

여백의 설정

p.example {
  margin: 50px 50px 50px 50px;
}

• 각각 top, right, bottom, left margin을 50px로 설정(top부터 시계방향)
• 단순히 margin: 50px; 로 대체 가능

테두리의 스타일링

p {
  border: 5px solid red;
}

span {
  border: 1px dotted #0000ff;
}

border: 선의 굵기 > 선의 종류 > 선의 색깔 순

꿀팁

밑줄을 그어주는 스타일링은 p { text-decoration: underline; }이지만, 밑줄을 커스터마이징하기가 어렵다.

따라서 아래와 같이 border-bottom 스타일링과 텍스트 길이만큼 공간을 차지하는 span을 활용하면, 커스터마이징이 가능한 밑줄을 구현할 수 있다.

span {
  border-bottom: 3px solid black;
  padding: 0px 0px 5px 0px;
}

!! 실무에서 자주 쓰이는 스킬 : Box-Sizing 


* {
  box-sizing: border-box;
}


보다 직관적으로 box의 파라미터를 설정하기 위해 box의 size는 보이는만큼의 width값으로 설정하고,
이후 padding을 이용해 box의 크기를 세부조정한다