即使填充为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）是mixins，定义如下：

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

首先，您的表单是800px宽，这是正确的（这是调试器所说的）。实际上你的消息类20px上有一个填充权限，这里没有问题，因为消息类上有更大的填充但仍然在输入周围填充了10px。