如何控制HTML横幅的宽度和高度？

Question

我希望我的HTML横幅宽度为915px。我在.box-row中有915px，但由于某种原因，HTML横幅大小为938px。

另外，如何控制HTML横幅的高度？

Jsfiddle：http://jsfiddle.net/tKn9f/5/

<div class="box-row">
<div class="box-form-body">
        <h3>
            See What You&#39;re Missing</h3>
</div>
<div class="box-form-button">
    <img alt="Learn More" height="100" src="http://www.robindelillo.fr/img/home/seeMoreButton.png" width="100" />
</div>

.box-row {
width:915px;
padding:10px;
border:1px solid #e2e3e4;
margin-top:50px;
overflow: hidden;
background-color:#f66511;

}

.box-row h3 {
    font-family:SegoeBold, Helvetica, Arial;
    font-size:1.3em;
    font-weight:normal;
    color:#fff;
    margin: 0;
}
.box-form-body {
    display: inline-block;
    vertical-align: middle;
    width: 75%;
    padding: 0 0 0 2em;
}
.box-form-button {
    display: inline-block;
    vertical-align: middle;
    width: 15%;
    padding: 0 0 0 2em;
}
.box-form-button img {
    vertical-align: bottom;
}

Answer 1

更新以下课​​程。

.box-row {
width:895px;
padding:10px;
border:1px solid #e2e3e4;
margin-top:50px;
overflow: hidden;
background-color:#f66511;
height:300px;
}

您可以添加高度值以指定所需横幅的高度，减去填充顶部和底部值。

Answer 2

使你的宽度为895px。由于每侧都有10px填充，因此可以为您提供额外的20px宽度。 895 + 20 = 915

.box-row {
    width:895px;
    padding:10px;
    border:1px solid #e2e3e4;
    margin-top:50px;
    overflow: hidden;
    background-color:#f66511;
}

Answer 3

如果你执行一个inspect元素，你会看到左边和右边的填充设置为10 px，左边和右边的边框设置为1 px。总计加起来为937px。

要么你可以删除横幅上的边框和填充

.box-row {
width:915px;
/*  padding:10px;
    border:1px solid #e2e3e4;*/
margin-top:50px;
overflow: hidden;
background-color:#f66511;
}

或减小宽度使其数到915

.box-row {
width:893px;
padding:10px;
border:1px solid #e2e3e4;
margin-top:50px;
overflow: hidden;
background-color:#f66511;
}

请参阅此处Chrome开发工具的截图

Answer 4

除非您更改框模型，否则

边框宽度和填充会添加到宽度或高度：http://www.w3.org/TR/css3-ui/#box-sizing0