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

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

여백을 유지하면서 너비가 100%인 div를 표시하려고 할 때 특정 CSS 속성 작동할 수 있습니다.

제공된 코드에서 HTML 구조에는 컨테이너 div가 포함되어 있습니다. (#page) 및 원하는 100% 너비와 여백을 가진 내부 div(#margin). 그러나 요소를 부동화하고 너비를 100%로 설정하면 내부 div가 컨테이너 너비를 초과할 수 있습니다.

이 문제를 해결하려면 calc() CSS 함수를 활용할 수 있습니다. 업데이트된 CSS 코드:

#margin {
  width: calc(100% - 10px);
}

이 표현식은 사용 가능한 너비에서 10픽셀(원하는 여백 너비)을 빼서 지정된 여백을 존중하면서 내부 div가 컨테이너 내에서 완전히 확장될 수 있도록 합니다.

또는 여백을 사용하는 대신 패딩과 box-sizing: border-box 속성을 사용할 수 있습니다. box-sizing을 border-box로 설정하면 패딩이 전체 너비에 포함되어 div 내의 너비와 여백을 모두 수용합니다.

#page {
  padding: 10px;
}

#margin {
  box-sizing: border-box;
  width: 100%;
}

이러한 솔루션 중 하나를 구현하면 다음을 표시하는 것이 가능해집니다. 원하는 여백을 유지하면서 너비가 100%인 div.

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