CSS, 중첩된 div 및 여백 vs.심

StackOverflow https://stackoverflow.com/questions/1419519

  •  07-07-2019
  •  | 
  •  

문제

나는 박스 모델을 완전히 이해합니다.이 질문은 마진 사용 시기와 패딩 사용 시기와 관련된 의미론적 방법론을 파악하려는 시도에 관한 것입니다.

여기에 전형적인 예가 있습니다.

먼저, 일반 영어로:

  • 상황:컨테이너 div가 있고 그 안에 단락 요소가 있습니다.

  • 목표:div 내부와 단락 외부 사이에 12px 공간이 있어야 합니다.

  • 옵션 a) 컨테이너 div에 12px 패딩 적용

  • 옵션 b) 단락 요소에 12px 여백 적용

또는 원하는 경우 HTML:

<div id="container">
    <p>Hello World!</p>
</div>

CSS:

옵션 a)

div#container {padding: 12px;}

옵션 b)

p {margin: 12px;}

건배!

존

도움이 되었습니까?

해결책

개인적으로, 나는 옵션 A를 선호합니다. 왜? 이제 다른 HTML 요소를 DIV에 추가해야한다고 말하면 패딩을 유지하기를 원합니다. CSS 파일에 다른 규칙을 추가하여 작동하도록 할 필요가 없습니다.

다른 팁

패딩과 여백은 다음과 같은 경우를 제외하고는 동일한 효과를 제공합니다 (일부는 놓칠 수 있습니다).

  1. 당신은 일종의 배경 속성이 있습니다. 여백은 그들을 얻지 못합니다.
  2. 당신은 국경이 있습니다
  3. 당신은 TD를 사용합니다 (마진 없음)
  4. 두 개의 중첩 된 품목 인 마진은 패딩이 아닌 곳에 무너집니다.
  5. (이것을 확인해야합니다) 아마도 요소의 너비와 높이에 다르게 영향을 미칩니다. (어떤 사람이 더 잘 알고 있다면, pls는 이것을 편집합니다).

이것은 CSS의 버그입니다. 예는 다음과 같습니다.

http://creexe.zxq.net/div-issue-padding.html = 패딩 문제

http://creexe.zxq.net/div-issue-margin.html = 마진 문제

예제의 빨간색과 녹색 div 태그는 CSS 속성 상단에 의해 생성되었지만 자체 단점이 있습니다. Athat 상단, 하단 등은 DIV 태그의 위치가 절대적이고 상대적이지만 정적이지 않은 경우에만 작동합니다.

그것은 당신이 시각적으로 달성하려는 것에 달려 있습니다. 일 것이다 container 단락의 양쪽에 거터에 매달릴 수있는 다른 어린이 요소가 있습니까? 그렇다면 마진이 더 의미가 있습니다. 그러나 만약 container 모든 요소에 대해 12 픽셀 거터가 있어야합니다. 기간은 여러 요소 세트에 마진을 적용하지 않도록 패딩을 사용하는 것이 가장 합리적입니다.

일반적으로 당신은 항상 단락이 일관된 단락을 이끌어 내기 위해 수직 마진을 갖기를 원합니다.

개인적으로, 나는 옵션 A와 함께 갈 것입니다 #container {padding: 12px;} 그것을 충분히 명확하게하기 때문입니다 모두 자식 요소는이 Div의 경계에서 12px 떨어져 있어야합니다.

다른 요소가 12px 이상에서 #container테두리, 그런 다음 그 요소에 훨씬 더 많은 마진을 적용합니다.

건배!

디비전의 수직 패딩 - 여러 단락 사이에 다른 양의 수직 공간을 원한다면 하단 마진을 사용하고 둘러싸는 부서의 상단/하단 패딩은 거의 남아 있다고 가정 할 때 항상 손상되지 않은 상태를 유지합니다. 내부에 정적으로 배치 된 요소.

차이점은 국경이 어디에 있는지입니다.

테두리는 여백과 패딩 중간에 SMACK DAB에 위치합니다.여백을 지정하는 경우 이는 테두리 밖의 공백입니다.

패딩을 지정하면 테두리 내부의 공백입니다(테두리를 요소에서 더 멀리 밀어냅니다).

CSS 스트리핑으로 인해 여기서는 표시할 수 없지만 다음을 시도해 보세요.

<body style="background-color: #aaa">
<p style="background-color: #aee; margin: 40px; padding: 40px; border: solid 2px black;">
  i have margins, padding and a border.
</p>

<p style="background-color: #aee; margin: 40px; padding: 0; border: solid 2px black;">
  i have margins, and a border.
</p>

<p style="background-color: #aee; margin: 0; padding: 40px; border: solid 2px black;">
  i have padding and a border.
</p>
</body>

다른 것들!

  • 패딩은 요소의 배경색을 가져오고 여백은 기본적으로 투명합니다.

  • 일부 요소(예: td)는 패딩 변경에 반응하는 동안 여백을 무시하는 것처럼 보입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top