如何移除class="no-border"元素的右侧内边距？CSS问题咨询

我想移除带有class="no-border"类元素的右侧内边距（padding-right），试了下面的CSS代码但没效果，用padding-right:none也不行，相关代码如下：

CSS代码 #

#menu-bar-container-2 { border: 1px solid gray; }

.menu-bar-2 a {
  float: left;
  color: black;
  padding: 2px 16px 0px 16px;
  font-size: 15px;
  text-decoration: none;
  border-right: 1px #bb4545 solid;
}

.no-border {
  border-right: none !important;
  padding: none !important;
}

HTML代码 #

<div id="menu-bar-container-2">
  <div class="menu-bar-2">
    <a href="">Home</a>
    <a href="">War in Ukraine</a>
    <a href="">Coronavirus</a>
    <a href="">Climate</a>
    <a href="">Video</a>
    <a href="">Asia</a>
    <a href="">UK</a>
    <a href="">Business</a>
    <a href="">Tech</a>
    <a href="">Science</a>
    <a href="">Stories</a>
    <a href="">Entertainment & Arts</a>
    <a href="">Health</a>
    <a href="" class="no-border">More</a>
    <img src="images/Down Arrow.png">
  </div>
</div>

问题出在你用了padding: none——CSS里没有none这个padding有效值，浏览器会直接忽略这条无效声明，所以没效果。

要移除右侧内边距，直接把padding-right设为0即可，同时保留其他方向的padding（如果需要的话）：

.no-border {
  border-right: none !important;
  padding-right: 0 !important; /* 仅移除右侧内边距 */
}

如果你想完全匹配原元素的上下左padding，只是把右侧设为0，也可以这样写：

.no-border {
  border-right: none !important;
  padding: 2px 0 0 16px !important; /* 保持上下左的padding值，右侧设为0 */
}

这样就能正确移除.no-border元素的右侧内边距了。

内容的提问来源于stack exchange，提问作者Hardik Bhuta