实例:
http://jsfiddle.net/yDQXG/
我在Chrome中看到的内容:http://i.imgur.com/shLfA.png
我似乎无法弄清楚输入元素(蓝色字段)周围的间距来自何处.有任何想法吗?
- <form method="get">
- <fieldset class="halfblock">
- <input class="blockheader" type="text" value="Field A">
- <textarea class="blocktext" rows="5">Line 1 Line 2</textarea>
- </fieldset>
- </form>
解决方法
这是因为它们是内联元素.图像经常发生同样的事情.
您需要做的就是在输入中添加display:block:
- input.blockheader {
- margin: 0;
- padding: 0;
- text-align: center;
- background: #ABD9E2;
- font: 11px/11px 'Vollkorn',serif;
- border: none;
- width: 100%;
- position: relative;
- /* top: -7px; */
- display: block;
- }