手机边框看起来很近

Question

我用以下HTML创建了标题：

.menu-item-text-mobile {
    -webkit-transition: border 200ms ease-out;
    -moz-transition: border 200ms ease-out;
    -o-transition: border 200ms ease-out;
    transition: border 200ms ease-out;
    border-bottom: 2.11px solid transparent;
    border-top: 2.11px solid transparent;
    margin-left: 50px;
    display: inline-block;
    padding: 2px;
    margin-bottom: -10px;

}

.menu-item-text-mobile:focus {
    padding: 2px;
    margin-bottom: -10px;

}

.menu-item-text-mobile::after {
    bottom: 1px;
}

#who-menu-mobile:hover .menu-item-text,
#who-menu-mobile:focus .menu-item-text,
#who-menu-mobile:active .menu-item-text {
    border-bottom: 2.11px solid #61f6ff;
    padding: 2px;
    margin-bottom: -10px;

    border-top: 2.11px solid #61f6ff;
}

<span class="menu-item-text">

<span align="center">Headline</span>
</span>

但是，即使当我检查网站时看起来不错，当我检查手机时，它也忽略了页边距底部，而填充CSS和边框太接近标题了。

这就是我希望边框在：focus上看起来的样子。

这是我目前的看法（边界太近而忽略了我的填充/边距）

谢谢！

Answer 1

您可以像这样向元素添加填充

li.with-padding {
    padding: 5px 0; /* <-- Magic goes here */
}


li {
    border-bottom: 2.11px solid #61f6ff;
    border-top: 2.11px solid #61f6ff;
}

li+li { /* Add margin top to second li */
  margin-top: 10px
}

<ul>
  <li class="with-padding">This is with padding</li>
  <li>This is without padding</li>
</ul>

Fiddle example