html - 将子元素移出父元素

Question

我有一个使用模板的自定义 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标签和几张图片。

Answer 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 进行测试。