여백이 있는 100% 너비 Div를 어떻게 만들 수 있나요?

여백이 있는 100% 너비 Div 표시

폭이 100%이고 여백이 있는 확장 가능한 div를 표시하려면 다음 방법을 사용할 수 있습니다. 고용됨:

calc() 사용 기능

이 방법을 사용하려면 브라우저에서 calc() CSS 기능을 지원해야 합니다. 다음 코드를 사용할 수 있습니다.

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

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

패딩 및 상자 크기 조정

이 방법을 사용하려면 상자 크기 CSS 속성 및 테두리에 대한 브라우저 지원이 필요합니다. 상자 값:

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

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

패딩 및 상자 크기 조정 사용: border-box를 사용하면 여백을 포함할 수 있습니다. 요소의 너비 내에서.

위 내용은 여백이 있는 100% 너비 Div를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!