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

Question

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

StylusCSS代码如下：

.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 像素，这是正确的（调试器就是这么说的）。实际上，您的消息上有一个 padding-right class 20px，这不是问题，因为消息上有更大的 padding class 但是，您的输入周围仍然有 10px padding。

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

Form given padding-right even though padding is 0px

html

css

stylus

pug