css - 创建子标题时跨越折叠/边距/填充？

Question

请在此处查看此代码: http://jsfiddle.net/ap6vK/

span.Title{
    font-size: 100px;       
    color:#6495ed;
    border:1px solid black;
}

span.SubTitle{
    font-size: 30px;
    position:relative;
    top:23px;
    right:163px;
    color:#778899;
}

<span class="Title">
    Caption
    <span class="SubTitle">SubCaption</span>
</span>

我使用两个跨度来创建子标题。我遇到的问题是外部跨度不会折叠。看到延伸太远的黑色边框了吗？我想将边框裁剪到标题，而不是将标题+子标题的大小保持在彼此旁边而不是彼此下方。有人知道怎么做吗？

Answer 1

如果我理解正确，你的意思是正确的填充太多了。这是因为任何设置了 left 和 top 的 position relative 都会像，元素就好像它在那里，但只是移动了。 (意味着它占据了房地产，但随后转移了)。所以这就是为什么在你的边界右边有额外的填充。

你可以看看:

http://jsfiddle.net/ap6vK/4/

它正在使用内部跨度

position: absolute

和外部跨度:

position: relative

这样放置的是内跨，不是按正常的流量，也没有考虑不动产。但是要让它工作，你必须使外部跨度 position: relative 因为容器必须有任何 position 被设置为某个东西而不是默认值 static 这样带有 position: absolute 的子元素将relative 到这个容器。