margin-bottom在首页的工作方式不同

Question

我有以下css，边距值在所有菜单页面中都相同但只在前页中有所不同，即右侧的“The Landmark”内容

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的边际值。请有人找到这个理由。

test page

我正在使用joomla模板。

屏幕截图

Answer 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;
}

Answer 2

从我所看到的，产生间距的原因是因为你将.article-content div包含在附加了类“blog”的表中。

您有很多css样式，指向在整个网站中应用于填充的填充。