Css 填充导致div扩展到父级之外

知道为什么.story文本会超出容器的边界吗？我不想设置overflow:hidden，因为它不能解决填充导致其扩展超出边界的问题（并且文本将与容器的右边缘齐平）。为什么.story文本不能保持在其父文本的范围内？如何使其正常运行

小提琴：

HTML:

---

如果您取出.story文本的宽度声明，则应该修复它。

将story文本的宽度设置为280px或仅设置容器宽度-左填充-右填充。此处演示

效果不错，但如果文本很短，则故事文本不会延伸到所有文本way@CaptSaltyJack，如果你为“故事文本”类设置了一个宽度，你需要从中减去填充。是的，如果文本不换行，那么使用@mirza在下面发布的答案，只声明确切的大小而不计算填充。否则，不需要声明宽度。

<div id="story-container">
    <div class="story">
        <img src="http://www.westernjournalism.com/wp-content/uploads/2011/04/Barack-Obama-There-Might-Be-Chances-of-Further-Offshore-Drilling-Campaigns.jpg" />
        <div class="story-text">
            <h4>Obama is pointing at you!</h4>
            <p>It is this very gaze, and this very pointed finger, that actually killed Osama bin Laden.</p>
        </div>
    </div>
    <div class="story">
        <img src="http://reason.com/assets/mc/jtaylor/rahm.jpg" />
    </div>
</div>

#story-container {
    margin-top: 2em;
    width: 300px;
    height: 200px;
    border: 1px solid #999;
    position: relative;
}

.story {
    position: absolute;
}

.story img {
    width: 100%;
    height: 100%;
}

.story-text {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    position: absolute;
    /*top: 130px;*/
    bottom: 0;
    height: 45px;
    width: 100%;
    padding: 10px;
}

.story p {
    font-size: 0.7em;
}