padding: 10px 20px 30px 40px; (top, right, bottom, left)
margin : 20px 40px; // bottom, left값이 없으면 top이랑 right에 있는값이 자동으로 들어감
box-sizing의 default값은 content-box으로 들어가 있음
=> padding 이나 border 값을 추가적으로 넣는다면 box의 크기가 padding, margin에 따라서 커진다. 왜냐하면 기본값이 content-box로 설정되어 있기때문에
예를들어, width: 400px height 500px로 설정을 하고 padding-left: 20px, padding-top: 30px을 준다면 box의 크기는 width: 420, height는 530dmfh 늘어남. content-box로 설정되어 있기때문에 content는 400, 500으로 고정되어 있고 거기에 padding 값이 들어가기 떄문에...
해결방법은 box-sizing 값을 border-box으로 설정해주면 된다. border-box는 말 그대로 border를 기준대로 하기때문에...
/* css 모든요소들에게 box-size 설정법 */
* {
box-sizing: border-box;
}
(1) display: block
따로 width를 선언하지 않은경우 부모의 요소의 값을 물려받음(100%)
따로 width를 선언한 경우는 남은공간을 margin으로 자동으로 채움(욕심이 많은아이)
=> 실제 개발자도구에서는 표시가 되어지지 않으니 주의
margin: 0 auto;(top, buttom: 0 , left,right: auto) (좌우로 가운데로 정렬)
width, height, margin, padding 등 뭐든 값을 설정할 수 있음.
따로 부모의 height를 선언하지않을 경우 모든 자식요소의 height의 합이랑 부모의 height의 값은 같다.
(2) display: inline
(3) display: inline-block