Question

我找到答案的所有搜索都失败了，所以这里就是这样。我正在尝试将底部填充添加到包含在div内部的按钮，我想将按钮向上移动到更靠近顶部。然而，当添加填充时，它只是拉伸按钮的宽度和宽度。高度。对不起，如果这是非常简单的事情，我对编码很新！

.div {
background-image: url('images/banner.png');
width: 920px;   
height: 280px;
border-radius: 5px;

}

.button {
width: 226px;
height: 57px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px; /* border radius */
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box; /* prevents bg color from leaking outside the border */
background-color: #f1efea; /* layer fill content */
-moz-box-shadow: 1px 3px 5px rgba(0,0,0,.77), inset 0 2px 0 rgba(255,255,255,.31); /* drop shadow and inner shadow */
-webkit-box-shadow: 1px 3px 5px rgba(0,0,0,.77), inset 0 2px 0 rgba(255,255,255,.31); /* drop shadow and inner shadow */
box-shadow: 1px 3px 5px rgba(0,0,0,.77), inset 0 2px 0 rgba(255,255,255,.31); /* drop shadow and inner shadow */
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDIyNiA1NyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjUwJSIgeTE9Ijk5LjUlIiB4Mj0iNTAlIiB5Mj0iMC40OTk5OTk5OTk5OTk5OSUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZWM5NTMxIiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZWZhNzU1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyMjYiIGhlaWdodD0iNTciIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==); /* gradient overlay */
background-image: -moz-linear-gradient(bottom, #ec9531 0.5%, #efa755 99.5%); /* gradient overlay */
background-image: -o-linear-gradient(bottom, #ec9531 0.5%, #efa755 99.5%); /* gradient overlay */
background-image: -webkit-linear-gradient(bottom, #ec9531 0.5%, #efa755 99.5%); /* gradient overlay */
background-image: linear-gradient(bottom, #ec9531 0.5%, #efa755 99.5%); /* gradient overlay */

Answer 1

您需要做的就是更改该元素的盒子模型。

.button {
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box;
}

这可以确保填充量不会添加到总宽度或高度，宽度和高度保持您指定的大小，无论填充 - 或边框 - 值。

想要了解更多内容，请阅读此帖：http://paulirish.com/2012/box-sizing-border-box-ftw/

Answer 2

有几种方法可以做到：

.button {
    position: relative;
    top: -5px; /* will result in .button moving 5px 'up' from where it is */
}

或者您可以调整保证金：

.button {
    margin-top: -5px;
}

但请注意，调整边距将影响相对于.button放置的任何元素的位置，而指定“top”值则不会。记得申报'position：relative;'首先，如果使用这种方法。

Answer 3

将此CSS添加到您的相应课程中，它会对您有所帮助。

div {
  position: relative;
}
.button {
    position: absolute;
    top: -3px;
}

添加填充是为元素添加不需要的宽度，修复？ CSS

3 个答案: