Question

我正在为我的妻子整理一个网页，我遇到了一个我无法弄清楚的CSS问题。我有一个图像滑块（RoyalSlider），我希望周围没有空格，但滑块div之前的各种嵌套div添加填充，边距和边框。类中的类和格式在页面的多个位置使用，所以我不能简单地更改每个元素而不破坏页面的其他元素，我会更喜欢来执行此操作搞乱PHP。

以下是导致格式化的div，以tabbed方式表示它们的嵌套方式，每个div下面都是div的CSS格式。

<div class="container">
    #section-content .container {
        padding-top: 20px;
    }

    #section-content .container {
        border-left: 10px solid white;
        border-right: 10px solid white;
    }

        <div class="eleven columns content sixteen no-thumbnail">
            .content {
                padding: 10px 0 0;
            }

            .column, .columns {
                float: left;
                display: inline;
                margin-left: 10px;
                margin-right: 10px;
            }

                <div class="the_content post type-post hentry excerpt clearfix">
                    .content .hentry {
                        padding-bottom: 15px;
                    }

                    <div class="royalSlider">
                        <div class="rsOverflow">
                            <div class="rsContainer">

我以为我可以用一堆＆gt;做点什么（或者某些东西......我的CSS技能很简陋）指明当royalSlider div出现时它会覆盖所有其他规则，但我无法弄清楚如何去做。

页面的URL在这里：

http://rachelhappen.com/high-res-royal-test-post/

这是一张图片，展示了它现在的样子，我希望它如何，以及CSS格式化的彩色图形。

image of the webpage http://rachelhappen.com/wp-content/uploads/borders.jpg

非常感谢任何帮助。

Answer 1

您可以尝试类层次结构。我假设royalSlider肯定会在那里，然后你可以尝试使用它的层次结构来指定用于它的规则。

Example

你可以尝试

.container .royalSlider{
/* rules here */
}

希望它有所帮助。

[编辑]：所以你的问题是填充位于父级，因此是问题。

Problem

Work around ==＆gt;在容器上尝试相同的背景颜色 - 隐藏空白区域。不是一个完美的解决方案 - 只是一个解决方法。如果你想让图像居中

，那就不合适了

Answer 2

给图像一个ID并将其填充设置为0,0,0,0，如果图像下方仍有一些空白区域，则将display属性设置为block;

删除CSS空格

2 个答案: