当使用边框CSS时，文本被推送到div中

我用一个div在我的网页的标题上有一个渐变背景

在CSS中使用“border”属性时，文本会被推出div

我试过改变尺寸，去掉半径边界等

#TextKeyboard {
    height: 26px;
    width: 330px;
    text-transform: uppercase;
    text-align: left;
    background: -webkit-linear-gradient(#615bff, #262544);
    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#615bff, #262544);
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#615bff, #262544);
    /* For Firefox 3.6 to 15 */
    background: linear-gradient(#615bff, #262544);
    margin-top: 20px;
    margin-left: 20px;
    padding-left: 10px;
    border-radius: 12px;
    border: 1px solid;
}
h3 {
    color: #f6b824;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

这里是我的代码的一部分

---

谢谢。

某些元素上有预定义的样式，如h3

要修复按钮，请将此添加到yout h3规则：

margin: 0;
padding: 0;

---

编辑：

建议：使用你能找到的

reset.css

---

它将清除所有预定义的样式，并为您提供样式的完全控制。

只需添加

边距：0到您的
h3
课程：

h3 {
    color: #f6b824;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    margin: 0;
}

JSFIDDLE：