너비가 100%인 Div를 만들고 여백을 유지하려면 어떻게 해야 합니까?

너비와 여백이 100%인 Div 표시

여백을 유지하면서 너비가 100%인 div를 만드는 것은 어려울 수 있습니다. 그러나 이를 달성하기 위한 몇 가지 접근 방식이 있습니다:

float 및 calc() CSS 함수:

float 속성은 div를 가로로 배치할 수 있습니다. 다른 요소의 흐름에 영향을 주지 않고. calc() 함수를 사용하면 여백이 있는 div의 원하는 너비를 계산할 수 있습니다.

#page {
  background: red;
  float: left;
  width: 100%;
  height: 300px;
}

#margin {
  background: green;
  float: left;
  width: calc(100% - 10px);
  height: 300px;
  margin: 10px;
}

padding 및 box-sizing: border-box

패딩과 박스 크기 조정을 사용하여 원하는 대로 만들 수도 있습니다. 효과:

#page {
    background: red;
    width: 100%;
    height: 300px;
    padding: 10px;
}

#margin {
    box-sizing: border-box;
    background: green;
    width: 100%;
    height: 300px;
}

box-sizing을 border-box로 설정하면 패딩이 너비 계산에 포함됩니다. 이렇게 하면 여백이 패딩된 영역 외부에 적용됩니다.

위 내용은 너비가 100%인 Div를 만들고 여백을 유지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!