그림 그리드 문제 5

Question

간단한 Zurb 재단 5 DIV 클래스의 이미지 코드 :

`<header class="row"> 
<div class="large-4 columns"> 
<img alt="Bar chart" src="analytics.gif" /> 
<figcaption>Figure Caption Here 
</figcaption> 
</div> 

<hgroup class="large-2 columns"> 
<h1>Heading1</h1> 
<h2>Heading2</h2> 
</hgroup> 

<nav class="large-6 small-12 columns"> 
<ul> 
<li><a href="#">Home</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">Meet the team</a></li> 
<li><a href="#">News</a></li> 
<li><a href="#">Contact</a></li> 
</ul> 
</nav> 
</header>` 

그러나 DIV 클래스가 그림으로 대체 될 때 : <figure class="large-4 columns"> <img alt="Bar chart" src="analytics.gif" /> <figcaption>Figure Caption Here </figcaption> </figure>

이제 때문에 그림 태그 레이아웃 나누기에, 도형 태그를 대체합니다. 어떤 해결책?

Answer 1

코드를 볼 라이브 사이트가없는 나의 가정은 대부분의 브라우저에서 기본적으로 추가 된 figure 요소의 여백을 제거하지 않았기 때문입니다. 기본적으로 웹킷

figure { 
    display: block; 
    -webkit-margin-before: 1em; 
    -webkit-margin-after: 1em; 
    -webkit-margin-start: 40px; 
    -webkit-margin-end: 40px; 
} 

재단에

기본 figure 스타일은, 그러나 그것은 적용된 기본 여백을 제거하지 않습니다, display:block;-figure 요소를 설정 normalize.css이 포함되어 있습니다. 이 시도해보십시오 1em에 대한 최고 및 바닥마진과는 제거를

figure{ 
margin: 1em 0; 
} 

추가를 :

잠재적 인 수정

figure{ 
    margin:0; 
} 

Answer 2

같은 문제를했다 및 사용 0왼쪽 및 오른쪽.

그렇지 않으면 Foundation 5에 갈 수 있고, normalize.css 파일이 modifcations합니다

bower_components > foundation > css > normalize.css > line 165