如何從CSS的絕對高度去除10px

Question

我有一個問題，我無法弄清楚如何使這些「鋼琴鍵」向上移動10px。 我建立一個鋼琴應用程序和代碼，我到目前爲止在這的jsfiddle「https://jsfiddle.net/Klauss/fxhd5z3e/#&togetherjs=RmEh5FeuIE」 ``

但我想要做的是十個像素移動黑鍵起來。我曾嘗試：

margin-top: 10px; top: 10px; top: -10px; margin-top: -10px;

如果有人可以幫我，那將是極大的讚賞

Answer 1

確保添加margin-top: -10px更一般的margin: 1px後不會覆蓋它：

.blackKey { 
    /* ... */ 
    margin: 1px; 
    margin-top: -10px; 
} 

Thi s可以是combined至margin: -10px 1px 1px 1px或margin: -10px 1px 1px。

Updated JSFiddle。

Answer 2

如下所示，您可以將-10px的margin-top添加到.blackkey類，方法是將其他邊保留爲1px並只更改頂層值。

.blackKey { 
    background: #232323; 
    display: inline-block; 
    position: absolute; 
    width: 75%; 
    height: 20px; 
    color: #eee; 
    z-index: 10; 
    margin: -10px 1px 1px 1px; /*Add this*/ 
} 

#keyboard { 
 
\t width: 100%; 
 
\t left: 0px; 
 
\t position: relative; 
 
\t display: inline-block; 
 
\t background: black; 
 
\t height: 100%; 
 
} 
 
.whiteKey { 
 
\t background: #FCFBE3; 
 
\t display: inline-block; 
 
\t position: relative; 
 
\t width: 100%; 
 
\t margin: 1px; 
 
\t height:30px; 
 
\t text-align: right; 
 
} 
 
.blackKey { 
 
\t background: #232323; 
 
\t display: inline-block; 
 
\t position: absolute; 
 
\t width: 75%; 
 
\t height: 20px; 
 
\t color: #eee; 
 
\t z-index: 10; 
 
\t margin: -10px 1px 1px 1px; 
 
}

<div id="keyboard"> 
 
\t <span class="whiteKey">C</span> 
 
\t <span class="blackKey">C#</span> 
 
\t <span class="whiteKey">D</span> 
 
\t <span class="blackKey">D#</span> 
 
\t <span class="whiteKey">E</span> 
 
\t <span class="whiteKey">F</span> 
 
\t <span class="blackKey">F#</span> 
 
\t <span class="whiteKey">G</span> 
 
\t <span class="blackKey">G#</span> 
 
\t <span class="whiteKey">A</span> 
 
\t <span class="blackKey">A#</span> 
 
\t <span class="whiteKey">B</span> 
 
</div>

Answer 3

我更新了小提琴：因爲它更容易控制後使用：

#keyboard { 
 
    width: 100%; 
 
    background: black; 
 
} 
 
.whiteKey { 
 
    background: #FCFBE3; 
 
    width: 100%; 
 
    margin: 1px; 
 
    height:30px; 
 
    text-align: right; 
 
    position: relative; 
 
} 
 
.withBlack:after { 
 
    content: " "; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 20px; 
 
    background: #232323; 
 
    width: 75%; 
 
    height: 20px; 
 
    color: #eee; 
 
    z-index: 10; 
 
    margin: 1px; 
 
    text-align: left; 
 
} 
 
.keyC:after { 
 
    content: "C#"; 
 
} 
 
.keyD:after { 
 
    content: "D#"; 
 
} 
 
.keyF:after { 
 
    content: "F#"; 
 
} 
 
.keyG:after { 
 
    content: "G#"; 
 
} 
 
.keyA:after { 
 
    content: "A#"; 
 
}

<div id="keyboard"> 
 
    <div class="whiteKey withBlack keyC">C</div> 
 
    <div class="whiteKey withBlack keyD">D</div> 
 
    <div class="whiteKey">E</div> 
 
    <div class="whiteKey withBlack keyF">F</div> 
 
    <div class="whiteKey withBlack keyG">G</div> 
 
    <div class="whiteKey withBlack keyA">A</div> 
 
    <div class="whiteKey">B</div> 
 
</div>