2017-04-05 3 views
-1

나는 CSSCSS에 대해 매우 신 용이고 생각하는 모델 상자에 문제가 있습니다.CSS에서 잘못 위치 지정

"개인 데이터"아래의 두 요소가 모두 같은 높이가 아니며 이유를 찾을 수 없습니다. 누구든지 나를 도울 수 있습니까?

jsfiddle.net/jbzgmqns/

추신 : 추한 것, 모든 국경 그냥 자리 표시 자 포함 대해 걱정하지 마십시오.

+0

[ask]를 읽으십시오. 관련 코드는 제 3 자 사이트뿐만 아니라 질문에 직접 포함되어야합니다. – CBroe

+0

요소는 지정된 높이와 동일한 높이이지만 'p'요소는 브라우저 스타일 시트의 기본 여백을 갖습니다. 0으로 설정하십시오. – CBroe

답변

0

<P>...</p> 자체가 발생하기 때문에이 현상이 발생합니다. 동일한 수준의 이미지를 유지하려면 여백 값을 '0'으로 설정합니다 (예 : margin:0;).

.block { 
    height: 700px; 

그냥를 제거하고 모든은 다음과 같습니다

그리고

<div class="cuadro"> 
       <h1>Personal Data</h1> 
       <div class="imagen"> 
        <img src="http://gobierno.morelos.gob.mx/sites/default/files/images/transparencia/placeholder-transparencia.jpg" /> 
       </div> 
       <p style="margin: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        <br> Donec efficitur eros quis sapien congue, hendrerit rhoncus magna cursus. 
        <br> Nam a blandit diam. Curabitur auctor, ipsum eget mattis vulputate, elit ex egestas nunc, sit amet molestie 
        <br> ante felis porta ligula. Aenean elementum justo sed placerat finibus.</p> 
      </div></div> 
+0

여백 : 0; 실제로 고쳐, 정말 감사! 그런데 내가 이해하는 것은 여백이 기본적으로 0이 아니라는 것입니다. –

+0

고마워요. 알렉스, 답장 있음 예, 실제로 이라고 쓰면 왼쪽과 위쪽에서 여백이 적습니다. 그 불필요한 공간없이 전체 화면을 유지하기 위해 본문에 대한 여백 0을 설정해야한다는 것을 해결하려면. –

0

코드에서 당신이 블록의 높이를 정의 때문입니다 아래와 같이 <div class="cuadro">...</div> 내부 <p>을 때 안 벌금.

+0

또한 'height : 400px;' 당신은 당신의 '.cuadro img' – FusionDesign