How to put textarea in div with CSS


Tags: html,css

Problem :

I have a textarea in div.
This is my code:

#mdDiv {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 650px;
    width: 300px;
    background-color: blue;
}

#mdText {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    font-size: 18px;
}

<div id="mdDiv" >
    <textarea id="mdText">Hello World</textarea>
</div>

It shows this:
enter image description here

But I want the distance between text area and div is 10.
So I set

top: 10px;
bottom: 10px;
left: 10px;
right: 10px;

but the right distance is too big.
How do I do to set the distance between text area and div?



Solution :

Use margins and relative sizing instead of absolute positioning:

#mdDiv {
    height: 650px;
    width: 300px;
    padding: 0;
    background-color: blue;
}
#mdText {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    margin: 10px;
    padding: 0;
    font-size: 18px;
}

Often this can also be simplyfied:

#mdDiv {
    height: 650px;
    width: 300px;
    padding: 10px;
    background-color: blue;
}
#mdText {
    width: 100%;
    height: 100%;
    padding: 0;
    font-size: 18px;
}

    CSS Howto..

    How to enable bootstrap 4 flex?

    How to design the data that you gathered from the table

    How to have different size images fluidly respond CSS?

    how can I fetch a website and overwrite some ot its html and css [closed]

    How to manage textarea right side overflow in css?

    How to not make text colored within a href link but the text is also within div?

    How to select label tags that do not have a span inside them using css

    How do I style HTML in a JEditorPane?

    Selected text showing oversized selection area

    How to apply CSS only if class exists elsewhere in code?

    How do I display the first image from each div with .className?

    How to load CSS filed inside the body in JSP?

    How can I make the ul list the same size as the input element in terms of width?

    save CSS - while browsing, how can I save the css files from inside chrome dev or firebug to local directory [duplicate]

    How do I get a button to show on mouseover using jQuery?

    how to add css style to dynamically loaded snippet using jquery ajax

    How do I fix this div overflow?

    show/hide slider toggle for any number of IDs

    How to override CSS Box Sizing for just one area on page?

    How to create dashed radius border just with css?

    How to style google cse

    How to change the color of html td element after postback in asp.net?

    How to position and style blockquote in css

    How to avoid CSS conflict using jquery?

    How to have a logo in the middle of two menu lists?

    how do I create an HTML table with fixed/frozen left column and scrollable body?

    how to write a css that only can be visible on desktop in bootstrap

    How to make a font gisha-regular?

    How browser renders HTML

    How to set the select to have the width of the selected option