CODEWITHSUNDEEP
htmlcss
David Jones
David Jones

Reputation: 10219

Extra space is created when a button is placed directly below a text area

When placing a button directly below a text area, extra space is created in both Chrome and Firefox (I haven't tested other browsers). Here's a fiddle that replicates the issue. Here's the code:

HTML

<div>
    <textarea></textarea>
    <button></button>
</div>

CSS

div {
    width: 100px;
    height: 125px;
}
textarea {
    width: 100px;
    height: 100px;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    background: red;
    resize: none;
}
button {
    width: 100px;
    height: 25px;
    border: none;
    background: blue;
    margin: 0;
    padding;
}

Screenshot

Upvotes: 0

Views: 1628

Answers (2)

Oriol
Oriol

Reputation: 288050

You can:

1 - Add display:block to all childs.

    Demo: http://jsfiddle.net/JTmrk/2/

2 - Set font-size:0 on parent div and reset it (e.g. font-size:16px) on all childs.

    Demo: http://jsfiddle.net/JTmrk/3/

3 - Set float:left and clear:both to all childs.

    Demo: http://jsfiddle.net/JTmrk/5/

Upvotes: 0

Jasper
Jasper

Reputation: 75993

Change the display property on the textarea to block and they should line up without a gap in-between. In general when I have some HTML elements not lining-up properly, I play with the display property as it's usually the culprit.

Demo: http://jsfiddle.net/8kzpf/

Upvotes: 3

Related Questions