创建子标题时跨度崩溃/边距/填充？

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

如果我理解正确，那就意味着正确的填充太多了。这是因为任何设置position relative和left的{​​{1}}都是这样的，元素就像它在那里一样，但只是移位了。 （意思是它占据了房地产，但随后转移了）。所以这就是为什么你边框的额外填充。

你可以看看：

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

它正在使用内跨

top

和外跨度：

position: absolute

这样，内部跨度不是通过正常流动而是不考虑房地产。但要使其工作，您必须创建外部范围position: relative ，因为容器必须具有设置为某个而不是默认值position: relative的任何position，以便子元素具有static将相对到此容器。