css - 为什么我的输入不一致？

Question

我需要一些帮助。我是 css 的新手，所以我不知道为什么我的输入“textarea”没有与其他输入垂直对齐？它向右多了 1 或 2 像素...

这是我的 jsfiddle: http://jsfiddle.net/uxpedro/tDxc5/14/

form{
 width:255px;
 height:266px;
 margin: 0 auto;
 margin-top:200px;
}


input[type=text]{
  font-family:verdana;
  width:250px;
  height:40px;
  padding-left:5px; 
  background-color:rgba(255,255,255,0.95);
  border-style:none;
}

textarea{
  font-family:verdana;
  margin-top:30px;
  max-width:250px;
  min-width:250px;
  min-height:100px;
  max-height:200px;
  background-color:rgba(255,255,255,0.95);
  border-style:solid;
  border-color:rgba(215, 40, 40, 0.9);
 }

input[type=submit]{
  margin-top:-3px;
  width:250px;
  height:40px;
  color:white;
  background-color:rgba(215, 40, 40, 0.9);
  border-style:none;
  }

Answer 1

Chrome 的用户代理样式表(又名浏览器的“默认 CSS 样式”)为 textarea 指定了 2px 的边距。由于您只声明了 margin-top 属性，其余三个边距仍设置为 2px，正如您从检查器中看到的那样(可通过右键单击文本区域并选择 Inspect 来访问元素).

要使其与其余部分对齐，只需将 margin-top:30px 替换为 margin:30px 0 0 即可。