단락 (x) html, css 사이에 공간 만들기

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

  •  13-09-2019
  •  | 
  •  

문제

나는 내 사이의 공간을 원한다 <p>content</p> 태그. 이전과 후에는 아닙니다 <p> 태그. fx 내 코드는 다음과 같습니다.

<div>
   <h1>A headline</h1>
   <p>Some text</p>
   <p>Some text</p>
</div>
Something

H1에서 H1과 P 사이의 공간을 원하지 않습니다. 그러나 나는 마지막 후에 공간을 원하지 않습니다 <p> 꼬리표. 이것은 마지막 자식 또는 JS/JQuery없이 가능합니까?

CMS 시스템이기 때문에 마지막 태그에서 클래스 = "마지막"을 설정할 수 없습니다.

도움이 되었습니까?

해결책 

p + p {
  margin-top: 1.5em;
}

(이것은 IE6보다 CSS를 더 잘 지원하는 브라우저가 필요하지만)

다른 팁

IE6를 지원할 필요가 없다면 사용할 수 있습니다.

div, h1, p { margin: 0; }
p + p { margin-top: 12px; }

IE6을 지원 해야하는 경우 더러운 해킹이지만 JavaScript없이 작동합니다.

div, h1, p { margin: 0; }
h1 { margin-bottom: -12px; }
p { margin-top: 12px; }

이 방법의 단점은 글꼴 크기가 다르기 때문에 밸런싱 마진에 대해서는 단순히 1em을 사용할 수 없다는 것입니다. 필요에 따라 수동으로 조정하거나 픽셀 너비를 사용할 수 있습니다.

기본 바닥 마진을 P로 설정 한 다음 마지막 태그에 하단 마진이없는 클래스를 제공하십시오.

<div>
   <h1>A headline</h1>
   <p>Some text</p>
   <div class="paragraph-space"></div>
   <p>Some text</p>
</div>

?

<div>
  <h1>A headline</h1>
  <p>Some text</p>
  <p style="margin-bottom: 0;">Some text</p>
</div>

더 많은 브라우저 호환을 만들고 싶다면 다음을 사용할 수도 있습니다.

p { margin-top: 24px; }
h1 { margin-bottom: -24px; } // play with this value as necessary

부정적인 여백은 요소를 향해 요소를 끌어 올릴 것입니다. 내가 좋아하는 것보다 지저분하지만, 수업을 추가 할 수있는 방법없이 CMS 생성 코드의 자비에있을 때 창의적이어야합니다.

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