即使填充为 0px，表单也给定填充权答案

【问题标题】：Form given padding-right even though padding is 0px即使填充为 0px，表单也给定填充权
【发布时间】：2015-05-25 14:24:01
【问题描述】：

代码中没有设置右边距或右边距，当在 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}

【问题讨论】：

请发一个 Jsfiddle 链接
您已将表单设置为正好 800 像素宽。为什么你认为有额外的填充？该橙色部分显示元素容器内的剩余空间，而不是填充。如果我没记错的话，填充显示为绿色。
正如@JesseKernaghan 所说，如果您的 div 父级的宽度大于表单，则在您未设置时表单将显示“margin right”（不是margin）。如果您想占据所有 div 父级，请将表单宽度设置为 100%，或者如果您希望您的表单以该 div 为中心，请放置一个margin: auto;
其实我才意识到橙色代表边距。在 Computed 选项卡中，它显示为橙色作为边距。
Chesire。你的回答对我帮助很大。您能否将其发布为答案，以便我接受。特别是关于居中等的部分。谢谢。

标签： css html pug stylus

【解决方案1】：

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

【讨论】：

增加表单的宽度（）会减少橙色区域。减小宽度会增加橙色区域。添加 box-sizing 并没有改变任何东西。此外，消息类上的填充会影响输入旁边的单词。
右边的橙色部分不是填充，而是与父级的宽度差异。尝试使表单宽度：100%，我怀疑它会消失。
所以“消息”的宽度为 150 像素，输入/文本区域的宽度为 500 像素。如果您的表单是 800 像素宽，则 150 像素的橙色代表空白空间......这不是填充，而只是减法 xD
顺便说一句，您可以删除跨度上的 padding-right。除非您将其设置为 display: block，否则 span 不会受到填充的影响 :)