[css] CSS 박스모델과 여백상쇄

박스 모델

• content, padding, border, margin으로 구분
  

<style>
  div{
    width: 300px;
    height: 300px;
    padding: 10px;
	border: 5px solid #ccc;
	margin: 20px;
	/*box-sizing: border-box;*/
  }
</style>

• content-box

  • content 영역만을 기준으로 계산
  • width : 300px => content만 300px이고 나머진 각자 계산
    

• border-box

  • content, paddig, border을 합한 후 계산
  • width :100px => 위 3개를 다 더한 width가 100px
    

여백상쇄

• 여백이 겹치면 더 큰 여백으로 합쳐짐

    <style>
        div{
            margin : 20px 0;
            border : 2px solid #ccc;
        }

        p{
            margin : 30px 0;
            border : 4px dashed #ddd;
        }
    </style>
    <p>bottom 영역 마진이 상쇄 됩니다.</p>
    <p>top 마진이 상쇄되며, bottom 영역의 마진은 더 큰 30px을 가집니다.</p>
    <div>
        <p>이 문단은 위아래로 30px의 마진을 갖습니다.</p>
        <p>이 문단은 위아래로 30px의 마진을 갖습니다.</p>
    </div>

• 처음 p의 margin-bottom + 다음 p의 margin-bottom을 더한 50px이 여백 같지만 여백 상쇄로 30px의 여백만 생김