0

答えを見つけるための私の検索はすべて失敗したので、ここに行きます。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 */
4

3 に答える 3

0

必要なことは、その要素のボックス モデルを変更することだけです。

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

これにより、パディングの量が全体の幅または高さに追加されず、幅と高さが、パディング (または境界線) の値に関係なく、指定したサイズのままになります。

詳細については、この投稿をお読みください: http://paulirish.com/2012/box-sizing-border-box-ftw/

于 2013-04-19T05:56:28.960 に答える
0

あなたがそれを行うことができるいくつかの方法があります：

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

または、マージンを調整できます。

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

ただし、余白を調整すると、.button に対して相対的に配置された要素の位置に影響することに注意してください。'top' 値を指定しても影響はありません。「position: relative;」を宣言することを忘れないでください。この方法を使用する場合は最初に。

于 2013-04-19T05:57:55.743 に答える