Css 当链接处于活动状态时，如何仅使链接文本下降1px，而不是整行/整段？

我正在尝试制作一个具有简单onclick行为的按钮，因此当用户单击它时，文本向下按1px。以下是我写的CSS：

.clickhere {
    font-family: "Open Sans",sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    background: #4679bd;
    font-size: 13px;
    color: #fff;
    padding: 9px 10px;
    cursor: pointer;
    box-sizing: border-box;
    height: 34px;
}

.clickhere {
    display: inline-block;
    margin: 0 1.5%;
}

.clickhere:active {
    padding: 10px;
}

问题是我的onclick事件将整行向下推，如您在此处所见：。我尝试使用其他

显示
属性，但它在新段落上按下了我的“按钮”

你知道当点击我的文本链接时，如何使其下降1px（而不是整个段落行）？
你是否尝试过：after和：before

.clickhere {
    position: relative;
    font-family: "Open Sans",sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    background: #4679bd;
    font-size: 13px;
    color: #fff;
    padding: 9px 10px;
    height: 34px;
    cursor: pointer;
    box-sizing: border-box;
}

.clickhere {
    display: inline-block;
    margin: 0 1.5%;
}
.clickhere:before,
.clickhere:after {
    display: none;
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: #4679bd;
}
.clickhere:before {
    top: -1px;
}
.clickhere:after {
   bottom: -1px; 
}
.clickhere:active:before,
.clickhere:active:after {
   display: block;
}

看这个。
我想你必须保持对齐


CSS的编辑部分

.clickhere {
    display: inline-block;
    vertical-align: middle;
    margin: 0 1.5%;
}

很简单，只需将文本置于span标记中，并在激活时将其样式更改为位置：相对和顶部：2px，
以下是您的html代码：

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi volutpat ultrices dolor, sed    tempor lorem mollis nec. Nullam consequat euismod elit a blandit. Donec tincidunt velit accumsan justo facilisis.
<a class="clickhere" href=""><span>Click here</span></a>
<br>You will be sent an email with the ultimate cheat explained.
</p>
<p>In sollicitudin ut diam eget venenatis. Duis semper eros eget elit blandit, sit amet blandit enim faucibus.</p>
<p>Aenean lacus neque, molestie id ultricies in, molestie et ante.</p>
<p>Suspendisse sit amet sollicitudin arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>

希望有用
请将html添加到您的标签中，我认为这与您的问题有关，谢谢。
.clickhere {
    font-family: "Open Sans",sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    background: #4679bd;
    font-size: 13px;
    color: #fff;
    padding: 9px 10px;
    cursor: pointer;
    box-sizing: border-box;
    height: 34px;
}

.clickhere {
    display: inline-block;
    margin: 0 1.5%;
}

.clickhere span:active {
    position:relative;
    top: 2px;
}