넓이에 영향을 미치는 요소들

border, padding은 요소의 width를 늘어나게 한다.

border: 1px;

  • li의 넓이는 200pxpadding
    50px    컨텐츠를 입력하면 이 회색 영역 안에 만 들어간다.

li의 전체 넓이는 302px
html은 <ul> <li> 컨텐츠를 입력하면 이 회색 영역 안에 만 들어간다. </li> </ul> css는 
ul li{
    width: 200px;
    border: 1px solid #ccc;
    padding: 50px;
}
li의 최종 넓이는
넓이 200px + border 2px (좌우 1px씩) + padding 100px (좌우 50px씩) 200 + 2 + 100 = 302 li의 넓이는 200px이지만 border와 padding 때문에 최종적인 넓이는 302px이 됩니다. ★ Tip! outline인 border를 계산하기가 너무 어렵다면? 
*{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

꽉차게 좌우로 컨텐츠를 배치할때 여백 조절

  • VolumnEnterprise Data Hub

    비용 효율적인 빅데이터 저장과 분석!
    데이터 기반의 의사결정 기반 마련
    새로운 비즈니스 가치 창출

    more +

  • VelocityloT

    센서(loT)데이터 실시간 수집
    장기데이터 저장 기반 마련
    장애 사전 예측 및 대응

    more +

  • Variety보안로그통합/FDS고도화

    내부 보안 통제로 보안 강화
    신뢰성 향상 및 탐지 고도화
    사전, 사후 대응 체계 확립

    more +
컨텐츠 넓이는 1000px
  • 컨텐츠 넓이 316px
  • 여백
    26px
  • 컨텐츠 넓이 316px
  • 여백
    26px
  • 컨텐츠 넓이 316px
html은 <ul> <li> Volumn </li> <li> Velocity </li> <li> Variety </li> </ul> css는 ul li { float:left; width:316px; margin-right:26px; } /* 여백까지 정확하게 계산할때는 float:left를 꼭 추가하여 컨텐츠를 좌우로 배치하여야 함. */ ul li:last-child { margin-right:0; } /* 마지막 li의 오른쪽 여백 삭제 */ 컨텐츠 영역이 1000px 이므로 모든 요소들이 좌우로 배치되려면 넓이와 여백의 모든 합이 1000px을 넘지 않아야 한다.