0

我有以下css，边距值在所有菜单页面中都相同，但仅在右侧是“地标”内容的首页中有所不同

h1.componentheading, .componentheading, #ja-component h2 {
    padding: 5px 0 15px;
    margin: 15px 0 10px;
    /*background: url(../images/hdot.gif) repeat-x bottom;*/
    border-bottom: 1px solid #F3A831;
    color: #F3A831;
    text-transform: uppercase;
    padding-top: 15px;
    font-size: 200%;
}

当我将其替换为它时，margin: 15px 0 0;它可以完美运行。但实际上我想为所有页面标题提供 10px 的边距值。请任何人找到这个原因。

测试页面

我正在使用 joomla 模板。

截屏

在此处输入图像描述

4

2 回答 2

1

您的标记在“地标”页面上有所不同：

    <h2>OUR GEMS</h2>
    <p>We call them Banquet Halls, but they are so ...</p>

相对

地标 
  <table class="blog" cellpadding="0" cellspacing="0">
    <tbody>
      <tr>
        <td valign="top">
          <div>     
            <div class="contentpaneopen">
              <div class="article-content">
                <p>A warm welcome to the <strong>Landmark Hotel</strong>, ...

在第一个片段中，您遇到了margin collapse。

第二个片段只是一团糟（用于布局的表格，没有标题，大量标记的方式，......），这里没有边距折叠。

如果您的标记如此不同，您就不能期望得到相同的结果。

我会建议你修复你的标记（让它看起来像第一个片段），你的外观将是一致的

编辑：
如果您坚持保留表格，则可以为其添加负边距以模仿边距折叠。像这样的东西：

.componentheading + table.blog {
  margin-top: -10px;
}
于 2013-06-30T12:08:21.247 回答
0

据我所知，产生间距的原因是因为您将 .article-content div 包含在一个附有“博客”类的表中。

您有很多 css 样式指向将填充应用于整个网站的表格。

于 2013-06-30T11:54:52.107 回答