css - 表单给定 padding-right 即使 padding 是 0px

Question

代码中没有设置右边距或右边距的地方，当在 Chrome 的开发者工具中查看表单元素时，它在样式列表中同时显示“padding: 0”和“margin: 0”，但是 确实将鼠标悬停在表单元素上时显示边距。

Stylus CSS代码如下:

.barFive
  background-color dark-blue

  form
    width(800px)

    .label
      display table-cell
      padding 20px

      .sec
        display inline-block
        vertical-align middle

      .message
        width(150px)
        text-align right
        padding-right 20px

        font-family Helvetica
        font-size 1.6em
        color white

      input, textarea
        padding 10px
        width(500px)

        font-family Helvetica
        font-size 1.6em
        color darken(dark-blue, 40%)
        background-color light-blue

        border-radius 5px
        border 1px solid light-blue

Jade 代码是这样的，省略了更多的 div.label 元素。

  +sub-bar().barFive

    +title("Contact", "Ask Us Anything")

    form
      div.label
          div.sec.message
            span Name
          div.sec.input
            input(type="text" name="Name")
      br

+sub-bar() 和 +title(x, y) 是 mixin，定义如下:

mixin sub-bar()
    div.sub-bar(class!=attributes.class)
        div.container
            if block
                block
            else
                +error("No content provided")

mixin title(x, y)
    div.title
        h1.sub.main #{x}
        h3.sub.subtitle  #{y}

Answer 1

首先，您的表单宽度为 800 像素，这是正确的(调试器就是这么说的)。实际上，在您的消息类 20px 上有一个 padding-right，这不是问题，因为在消息类上有一个更大的填充，但仍然在您的输入周围有 10px 的填充。