Grid 基础5中的图形网格问题 简单的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时： 图中的标题

---

现在，由于地物标记布局中断，地物标记将置换。有什么解决方案吗？

如果没有一个实时站点来查看代码，我的假设是，大多数浏览器默认添加的figure元素没有删除边距

webkit上的默认地物样式

默认情况下，Foundation包括normalize.css，它将图形元素设置为显示：block；，但是，它不会删除应用于它的默认页边距。试试这个：

潜在修复

---

具有相同的问题并使用：

figure{
margin: 1em 0;
}

为顶部和底部边距添加了1em，并从左侧和右侧删除了0

< >否则，您可以进入基础5，并将其修改为标准化.CSS文件：

---

链接到小提琴或代码笔演示将是伟大的。

figure{
  margin:0;
}

figure{
margin: 1em 0;
}

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