HTML / CSS:文本类型输入上方和下方的额外间距

前端之家收集整理的这篇文章主要介绍了HTML / CSS:文本类型输入上方和下方的额外间距前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
实例: http://jsfiddle.net/yDQXG/

我在Chrome中看到的内容http://i.imgur.com/shLfA.png

我似乎无法弄清楚输入元素(蓝色字段)周围的间距来自何处.有任何想法吗?

  1. <form method="get">
  2. <fieldset class="halfblock">
  3. <input class="blockheader" type="text" value="Field A">
  4. <textarea class="blocktext" rows="5">Line 1&#13;&#10;Line 2</textarea>
  5. </fieldset>
  6. </form>

解决方法

这是因为它们是内联元素.图像经常发生同样的事情.

您需要做的就是在输入中添加display:block:

  1. input.blockheader {
  2. margin: 0;
  3. padding: 0;
  4. text-align: center;
  5. background: #ABD9E2;
  6. font: 11px/11px 'Vollkorn',serif;
  7. border: none;
  8. width: 100%;
  9. position: relative;
  10. /* top: -7px; */
  11.  
  12. display: block;
  13. }

猜你在找的HTML相关文章