如何删除绝对块内的额外填充或边距？

Question

我想重新创建像这个插图的东西

我无法修复填充（或边距问题）。以下是我尝试的内容：http://jsfiddle.net/kl94/RZPRS/2/

.circles {
    background-color: red;

    position:absolute;
    right: 0;
    top: 0;

    margin: 0;
    padding: 0;
}

.circle-title {
    background-color: orange;

    position:relative;
    right: 0px;
    top: 0px;

    width: 80px;
    height: 80px;
/*     -webkit-border-radius: 40px;
    -khtml-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px; */

    margin:0;
    padding:0;
}
.circle-reads {
    background-color: #28dd21;

    position:relative;
    right: 0px;
    top: 0px;

    width: 60px;
    height: 60px;
/*     -webkit-border-radius: 30px;
    -khtml-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px; */

    margin:0;
    padding:0;
}

约束是红色div，它必须是对顶/右父div的约束。

Answer 1

在这种情况下，您也可以定位其他两个元素absolute。你需要给红色div一个固定的高度和宽度，因为它位于absolute

请参阅此jsfiddle。

.circles {
    background-color: red;
    position:absolute;
    height:100px;
    width:100px;
    right: 0;
    top: 0;
}

.circle-title {
    background-color: orange;
    position:absolute;
    left: 0px;
    top: 0px;
    width: 80px;
    height: 80px;
    -webkit-border-radius: 40px;
    -khtml-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px; 
}

.circle-reads {
    background-color: #28dd21;
    position:absolute;
    right: 0px;
    bottom: 0px;
    width: 60px;
    height: 60px;
    -webkit-border-radius: 30px;
    -khtml-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

如果您希望两个圆圈没有指定高度宽度，可以试试这个。见jsfiddle。我觉得它需要尽可能多的“保姆”设置高度和宽度。

Answer 2

您需要在p代码中添加一个类，并将其边距和填充设置为0.

<p class="p">TITLE</p>
<p class="p">65 reads</p>

CSS

.p {
    margin: 0;
    padding: 0;
}

您可能还想将float: right;添加到较低的div。

.circle-reads {
    float: right;
}

JSFiddle

编辑：我做了一些更多的玩弄，让它看起来几乎是你想要的。

New Fiddle

我没有针对这些链接的具体链接，这是我在使用HTML / CSS时随着时间的推移和大量Google搜索所获得的内容。