1

我有一个使用模板的自定义 PHP CMS。我有一个 layout.tpl，我在其中设置了网站的整体外观，包括一个名为 boxmain 的类，它是布局的中心内容。在那里，我定义了我的 style.css 文件，其中包含 boxmain 类。

.boxmain { 
    background-color:#F5F5F5; 
    width:1025px;
    height:auto; 
    margin:0 auto; 
    font-size:11px;
    overflow: hidden;
    padding-top: 15px;
    padding-left: 5px;
    padding-bottom: 15px;
}

在它上面，我有一个图像横幅类。这也包含在内容和横幅之间创建空间的边距。

div#banner {
    background: url("../images/banners/banner1.jpg")  repeat scroll center center rgb(0, 0, 0);
    width: 100%;
    height: 270px;
    z-index: 1;
    margin-bottom: 25px; 
    -webkit-box-shadow:  0px 2px 15px 2px ;
    box-shadow: 0px 2px 15px 2px ;
}

我想要做的是能够删除横幅和 boxmain 上的所有填充和边距，而无需修改样式表，而是将其包含在模板中。出于某种原因，当我在模板中执行此操作时它不起作用，它只是破坏了 Cufon。

<style type="text/css">
div.boxmain { margin: 0; padding; 0; }
div#banner { margin: 0; padding: 0; }
</style>

因此，我在想，也许将子元素（基本上是模板中的所有内容）放在父元素（在 layout.tpl 中定义的 boxmain）之外，这将清除边距和填充，但是我该怎么做呢？它会工作吗？

模板中的内容基本上就是几个div标签和几张图片。

4

1 回答 1

1

这是一个有效的JSFiddle。

<style type="text/css">
div.boxmain { margin: 0; padding; 0; }
div#banner { margin: 0; padding: 0; }
</style>

<div id="banner">Banner content</div>
<div class="boxmain">Main content</div>

由于内联样式很容易覆盖主样式表，我想说这是一个排序问题。您可能在内联样式之后包含主样式表，这可以解释为什么它不起作用。

将内联也移动<style>到boxmain作品中

<div id="banner">Banner content</div>
<div class="boxmain">

    <style type="text/css">
    div.boxmain { margin: 0; padding; 0; }
    div#banner { margin: 0; padding: 0; }
    </style>

    Main content
</div>

因此，以覆盖样式作为前缀$page_content也应该这样做。
见JSFiddle

免责声明：这仅在 Firefox 16 上进行了测试。

于 2013-01-23T23:29:34.967 回答