css) box model

https://www.w3schools.com/css/css_boxmodel.asp

CSS Box Model

 

box element란 html elements를 둘러싸는 박스이다.

Margin, Border, Padding, Content로 이루어져 있다.

https://www.w3schools.com/css/css_boxmodel.asp

 

 

padding

• Padding - Clears an area around the content. The padding is transparent

 

일일히 설정하지 않고 아래와 같이 생략해줄수 있다.

 

모두 한번에 동일한 값 설정 

 

top-bottom / left-right 

 

top / right / bottom / left

 

---

margin

• Margin - Clears an area outside the border. The margin is transparent

위의 박스의 margin-bottom:0, 

아래 박스의 margin-top:0 해줌으로서 두 박스 사이의 margin을 제거할수 있다.

 

 

mragin을 negative값을 줄 경우:

 

---

border

• Border - A border that goes around the padding and content

border-style, border-color, border-width

padding의 태두리라고 보면 될것같다.

style을 지정해줄수 있고, width와 color을 지정할수 있다.

 

 

마찬가지로 style, width, color 모두 명시하지 않고 생략해줄수도 있다.

(width style color)

 

 

각각의 변을 다르게 지정할수도 있다.

bottom의 style,width,green만 지정해줬다.

 

border-radius

border의 태두리를 둥글게 만든다.

 

아래와 같이 %로 명시할수도 있다.