填充 CSS 按钮上方的空间

Posted 2023-03-06

【中文标题】填充 CSS 按钮上方的空间

【英文标题】：padding the space above a css button

【发布时间】：2016-10-19 03:59:48

【问题描述】：

我正在尝试将padding 添加到使用 CSS 创建的按钮上方的空间中。按钮CSS在文本周围已经有padding，所以如果我尝试添加padding-top，它只会改变按钮的大小，而不是将它向下移动到靠近它下面的元素，这就是我想要做的.

这是 CSS：

button 
  background:    #c00;
  background:    -webkit-linear-gradient(#c00, #600);
  background:    linear-gradient(#c00, #600);
  border-radius: 999px;
  color:         #f6f4f4;
  padding:       10px 100px;
  font:          normal 700 24px/1 "Open Sans", sans-serif;
  text-align:    center;
  text-shadow:   1px 1px 0 #000;
  margin-left: 80px;

【问题讨论】：

试试margin-top。

【参考方案1】：

在您的按钮中再添加一个样式属性。

button

     margin-top:10px;

【参考方案2】：

如果你想要这个 css 的顶部填充，那么你必须使用以下 css 而不是：

button 

        background:    #c00;
        background:    -webkit-linear-gradient(#c00, #600);
        background:    linear-gradient(#c00, #600);
        border-radius: 999px;
        color:         #f6f4f4;
        padding:       10px 100px 10px 100px;
        font:          normal 700 24px/1 "Open Sans", sans-serif;
        text-align:    center;
        text-shadow:   1px 1px 0 #000;
        margin-left: 80px;
    

css 行：padding: 10px 100px 10px 100px; 你想用多少改变它的第一部分，比如 padding: 50px 100px 10px 100px;

但问题是，如果您希望按钮上部位置的顶部填充不在按钮内部，那么您必须使用

.anyClassName
    margin-top: 10px;

使用包含按钮的此类 html 标记。

【参考方案3】：

我认为更好的解决方案是为按钮上方的元素添加底部边距：http://csswizardry.com/2012/06/single-direction-margin-declarations/

【参考方案4】：

其实我只是想通了。我在按钮周围添加了一个 div 标签，并在 div 中添加了 padding-top。

很抱歉浪费了您的时间。我是这种编码的新手 :)

【讨论】：

使用margin-top，其他用户说你。 padding 用于填充（内部），margin 用于边距（外部）