그림 태그로 공간 요구 사항을 이해할 수 없음 HTML5

HTML5를 사용하는 페이지에서 4 개의 그림 태그를 수평선으로 서로 인접하여 사용해야하는 작업을하고 있습니다. 각 그림 태그는 아이콘 80X80 픽셀을 보유하는 이미지로 구성되며 이미지 아래에는 캡션이 있습니다.그림 태그로 공간 요구 사항을 이해할 수 없음 HTML5

그것은 뭔가 다음과 같습니다 enter image description here

문제 : 그림 태그 위에 마우스를 올려 때 개발자 도구를 사용하여,이 아이콘의 조합을 복용 괜찮 80 픽셀 X 120 픽셀로 크기를 보여줍니다 + 캡션을 고려하십시오. 그러나 렌더링하는 동안 실제로 무엇을하는지는 스냅 샷에서 확인할 수 있습니다. 그것은 약간의 추가 공간을 차지합니다 (너비는 80px로 보여 지지만 그 이상을 사용합니다!). 인접한 그림을 필요 이상으로 오른쪽으로 밀었습니다. 코드 조각은 아래 다음과 같습니다

  <div id="figureIcons"> 
       <a href="" class="extLinks" target="_blank"> 
        <figure class="icons"> 
         <img class="linksIcons" src="icons/chrome_link.png" title="Website"> 
         <figcaption><b>HomePage</b><br />(Website)</figcaption> 
        </figure> 
       </a> 

       <a href="" class="extLinks" target="_blank"> 
        <figure class="icons"> 
         <img class="linksIcons" src="icons/linkedin_link.png" title="LinkedIn Profile"> 
         <figcaption><b>Profile</b><br />(LinkedIn)</figcaption> 
        </figure> 
       </a> 
     </div>

상기 구성에 사용되는 경우에만 CSS :

figure.icons 
{ 
    position:relative; 
    float:left; 
    margin-top: 5px; 
    margin-left: 1px; 
}

위의 유일한 CSS 문제에 관련 사용됩니다. 할당 된 다른 클래스/ID는 스타일 시트에서 아직 사용되지 않았습니다.

어디로 잘못 가고 있습니까? 이 문제를 어떻게 해결할 수 있습니까? 나는 그 옆에 4 개의 숫자를 놓아야한다. 도와주세요, 고마워요!

출처

2014-03-30 Darth Coder

클래스는 어떻게 생겼습니까? 'figureIcons','extLinks','icons','linksIcons' 등이 있습니다. –

<figure>에는 기본적으로 여백이 있으므로 오른쪽 여백과 아래쪽 여백을 0으로 지정하려면 스타일 시트에 명시 적으로 지정해야합니다. fiddle를 참조 즉

margin:5px 0 0 1px;

에 의해

margin-top: 5px; 
margin-left: 1px;

를 교체합니다.

크기를 살펴볼 때 경위가 너비에 여백을 추가하지 않는 이유는 기술적으로 여백이 요소의 일부가 아니기 때문입니다. 그들은 밖에있다. (패딩을 주면 너비에 추가됩니다.)

출처

2014-03-31 07:36:46

그림 태그로 공간 요구 사항을 이해할 수 없음 HTML5

답변

관련 문제