두 섹션 사이의 간격을 제거하는 방법 (하나씩)

두 섹션 (헤더 섹션과 본체 섹션)이 있는데 어떤 이유로이 큰 차이가 있습니다. 패딩을 0, 마진을 0으로 설정하는 등 많은 작업을 시도했지만 아무 것도 완료되지 않은 것 같습니다. 도와주세요! http://jsfiddle.net/Pfc2Z/2/두 섹션 사이의 간격을 제거하는 방법 (하나씩)

여기 여기에 관련 HTML을

<section class="header"> 
     <section class="logo"> 
      <img src="logo.png" height="100px" width="200px" alt="Img Not Available"> 
     </section> 
     <section class="link"> 
      <nav> 
       <ul> 
        <li>  
         <a href="#"><span>Home</span></a> 
        </li> 
       </ul> 
      </nav> 
     </section> 
    </section> 
    <section class="main"> 
     <p>Hello World</p> 
    </section>

을의 메인 섹션은 단락 태그가 포함되어 있기 때문입니다 CSS

html, body { 
margin:0; 
padding:0; 
background-color:#46a7bb; 
} 
.header { 
    background-color:#313145; 
} 
.logo { 
    padding-left:20%; 
} 
.logo, .link { 
    display:inline-block; 
} 
nav ul { 
    list-style:none; 
    padding:0; 
    margin:0; 
} 
.main { 
    background-color:white; 
    width:60%; 
    margin:0 auto; 
}

출처

2014-06-16 Icarus

입니다. 단락 태그에는 자체 기본 스타일 (여백 및 여백 읽기)이 있습니다. 그걸 제거하면 괜찮을거야. 그냥 CSS 클래스에 다음을 추가

p { 
    margin:0; 
    padding: 0; 
}

이 여기 참조 : http://jsfiddle.net/y9deH/1/

UPDATE :

을 예는 가능합니다. class selectors 또는 id selectors을 사용하면됩니다. Class selectors을 사용하면 기본 단락 스타일을 변경하지 않고 다시 사용할 때마다이 유형의 스타일을 다시 사용할 수 있습니다. 다른 한편,

ID selectors은이 단락에만 적용됩니다.

여기 class 선택의 예를 참조하십시오 http://jsfiddle.net/y9deH/2/

여기 id 선택의 예를 참조하십시오 :이 도움이 http://jsfiddle.net/y9deH/3/

희망을!

출처

2014-06-16 21:42:21

저는이 아이디어가 마음에 들지만 모든 단락의 여백과 패딩을 변경합니다. 나중에 마진과 패딩을 몇 단락 태그에 대해 정상으로 되돌리려면 가능한가? – Icarus

@Icarus 귀하의 의견을 바탕으로 내 대답을 편집했습니다 !! –

감사합니다! 그게 정확히 내가 찾던 것이 었습니다. .soomeclass는 프로그래밍 언어 일 뿐이라고 생각했습니다. 나는 css에서 이것을 할 수있는 단서가 없었다. – Icarus

레이아웃에 문제가 없으며 여백 또는 패딩 문제가 없습니다. 문제는 단락 <p>Hello World</p>입니다. 기본 마진이 있습니다. 당신은 0에 기본 마진을 제거하거나 부모 대신에 기본 단락 스타일 사용 패딩을 무시 패딩하지만 좋은 생각으로 내려 보내는 하여이 문제를 해결할 수 있습니다. 여기 링크가 사용되었습니다 (기본 섹션에 20px 패딩).

당신 경우 :

http://jsfiddle.net/fyfWq/

출처

2014-06-16 21:44:44

저는 몇 년 후에 웹 사이트를 만들지 않았으므로 모든 것을 기억하지 못합니다. "부모에게 패딩 사용"에 대해 설명해 주시겠습니까? 감사합니다. – Icarus

답변 해 주셔서 감사합니다. 그러나 Satwik의 답변은 제가 찾고있는 것이 었습니다. – Icarus

네, 맞습니다. 나는 또한 말했다. 그것은 기본 마진 문제입니다. 하지만 그런 식으로 제거해서는 안됩니다. 대답과 함께 제안했습니다. 고맙습니다 –

누군가가 설명 할 수없는 성가신 격차를 찾고 여기에 오는 그냥 경우

, 그들이 마진, 패딩의 모든 보통의 검사를 통과 한, 테두리 주셔서 감사합니다 요소를 inline-block으로 만들었다면, 브라우저는 정의 된 font-size에서 요소 사이의 공백을 렌더링합니다. 마이너스 마진을 추가하여이 문제를 해결하기로 결정했지만 html의 공백을 제거하여 해결할 수도 있습니다 (주석으로 처리하거나 ... 대기 ... 삭제/백 스페이스 버튼 사용).

이 문제에 대한 답변을 찾으러 이곳에 왔으므로 다른 사람을 돕기를 바랍니다.

업데이트 : 위의 질문을 다시 살펴보면 인라인 블록이 표시되어 실제로 문제가 될 수 있습니다.

출처

2017-05-14 21:46:43 gdbj

두 섹션 사이의 간격을 제거하는 방법 (하나씩)

답변

관련 문제