I have a parent, .mainWrap with 10px padding, but my input with width 100% doesn't wrap properly?
It stretched out at the right side, but it align fine with the padding on the left.
FIDDLE
input[type="text"], input[type="password"] {
width: 100%;
padding: 8px 10px;
border: 1px solid #DDD;
display: block;
margin-bottom: 8px;
overflow: hidden;
margin: 0 auto 8px auto;
}
You need to add:
input, label, button, div{
box-sizing:border-box;
}
This is because, by default, the box-sizing is content-box. This means that the element width is actually 100% + the padding.
Using the css
box-sizing:border-box;
Might work, but it is not compatible with, i think, IE 7 and down. Instead, since your inputs apparently are trying to occupy the full width of their wrapper, consider
display:block; width:auto;
Here's an article explaining it. The gist is that "width:auto" will occupy its parents width while including its own padding and border. "Width:100%" on the other hand just makes sure that the elements inner width is the same width as its parent, and the padding and border is extra.
Width:auto only works on block-level elements, like a typical "div" or "p", so simply making the inputs block level elements and applying width:auto instead of 100% should do the trick
Related
I have the following CSS and HTML snippet being rendered.
textarea
{
border:1px solid #999999;
width:100%;
margin:5px 0;
padding:3px;
}
<div style="display: block;" id="rulesformitem" class="formitem">
<label for="rules" id="ruleslabel">Rules:</label>
<textarea cols="2" rows="10" id="rules"></textarea>
</div>
Is the problem is that the text area ends up being 8px wider (2px for border + 6px for padding) than the parent. Is there a way to continue to use border and padding but constrain the total size of the textarea to the width of the parent?
Why not forget the hacks and just do it with CSS?
One I use frequently:
.boxsizingBorder {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
See browser support here.
The answer to many CSS formatting problems seems to be "add another <div>!"
So, in that spirit, have you tried adding a wrapper div to which the border/padding are applied and then putting the 100% width textarea inside of that? Something like (untested):
textarea
{
width:100%;
}
.textwrapper
{
border:1px solid #999999;
margin:5px 0;
padding:3px;
}
<div style="display: block;" id="rulesformitem" class="formitem">
<label for="rules" id="ruleslabel">Rules:</label>
<div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>
</div>
let's consider the final output rendered to the user of what we want to achieve: a padded textarea with both a border and a padding, which characteristics are that being clicked they pass the focus to our textarea, and the advantage of an automatic 100% width typical of block elements.
The best approach in my opinion is to use low level solutions as far as possible, to reach the maximum browsers support.
In this case the only HTML could work fine, avoiding the use of Javascript (which anyhow we all love).
The LABEL tag comes in our help because has such behaviour and is allowed to contain the input elements it must address to.
Its default style is the one of inline elements, so, giving to the label a block display style we can avail ourselves of the automatic 100% width including padding and borders, while the inner textarea has no border, no padding and a 100% width.
Taking a look at the W3C specifics other advantages we may notice are:
no "for" attribute is needed: when a LABEL tag contains the target input, it automatically focuses the child input when clicked;
if an external label for the textarea has already been designed, no conflicts occur, since a given input may have one or more labels.
See W3C specifics for more detailed information.
Simple example:
.container {
width: 400px;
border: 3px
solid #f7c;
}
.textareaContainer {
display: block;
border: 3px solid #38c;
padding: 10px;
}
textarea {
width: 100%;
margin: 0;
padding: 0;
border-width: 0;
}
<body>
<div class="container">
I am the container
<label class="textareaContainer">
<textarea name="text">I am the padded textarea with a styled border...</textarea>
</label>
</div>
</body>
The padding and border of the .textareaContainer elements are the ones we want to give to the textarea. Try editing them to style it as you want.
I gave large and visible padding and borders to the .textareaContainer element to let you see their behaviour when clicked.
If you're not too bothered about the width of the padding, this solution will actually keep the padding in percentages too..
textarea
{
border:1px solid #999999;
width:98%;
margin:5px 0;
padding:1%;
}
Not perfect, but you'll get some padding and the width adds up to 100% so its all good
I came across another solution here that is so simple: add padding-right to the textarea's container. This keeps the margin, border, and padding on the textarea, which avoids the problem that Beck pointed out about the focus highlight that chrome and safari put around the textarea.
The container's padding-right should be the sum of the effective margin, border, and padding on both sides of the textarea, plus any padding you may otherwise want for the container. So, for the case in the original question:
textarea{
border:1px solid #999999;
width:100%;
margin:5px 0;
padding:3px;
}
.textareacontainer{
padding-right: 8px; /* 1 + 3 + 3 + 1 */
}
<div class="textareacontainer">
<textarea></textarea>
</div>
This table hack code works for me in all browsers from IE8+
<td>
<textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>
I was looking for an inline-styling solution instead of CSS solution, and this is the best I can go for a responsive textarea:
<div style="width: 100%; max-width: 500px;">
<textarea style="width: 100%;"></textarea>
</div>
The problem lies in the box-sizing property.
By default, the initial value of the box-sizing property is content-box.
so you have something like this under the hood:
textarea {
border:1px solid #999999;
width:100%;
margin:5px 0;
padding:3px;
box-sizing: content-box;
}
box-sizing: content-box; means that the width of the actual element is equal to the width of the element's content box.
so when you add padding (in this case padding-right and padding-left --> because we are talking about width) and border (in this case border-right and border-left --> because we are talking about width), these values get added to the final width. so your element will be wider than you want.
set it to box-sizing: border-box;. so the width will be calculated like so:
horizontal border + horizontal padding + width of content box = width
in this case, when you add horizontal border and horizontal padding, the final width of element does not change, in fact, the content box will shrink to satisfy the equation.
You can make use of the box-sizing property, it's supported by all the main standard-compliant browsers and IE8+. You still will need a workaround for IE7 though. Read more here.
No, you cannot do that with CSS. That is the reason Microsoft initially introduced another, and maybe more practical box model. The box model that eventually won, makes it inpractical to mix percentages and units.
I don't think it is OK with you to express padding and border widths in percentage of the parent too.
If you pad and offset it like this:
textarea
{
border:1px solid #999999;
width:100%;
padding: 7px 0 7px 7px;
position:relative; left:-8px; /* 1px border, too */
}
the right side of the textarea perfectly aligns with the right side of the container, and the text inside the textarea aligns perfectly with the body text in the container... and the left side of the textarea 'sticks out' a bit. it's sometimes prettier.
For people who use Bootstrap, textarea.form-control can lead to textarea sizing issues as well. Chrome and Firefox appear to use different heights with the following Bootstrap CSS:
textarea.form-conrtol{
height:auto;
}
I often fix that problem with calc(). You just give the textarea a width of 100% and a certain amount of padding, but you have to subtract the total left and right padding of the 100% width you have given to the textarea:
textarea {
border: 0px;
width: calc(100% -10px);
padding: 5px;
}
Or if you want to give the textarea a border:
textarea {
border: 1px;
width: calc(100% -12px); /* plus the total left and right border */
padding: 5px;
}
How about negative margins?
textarea {
border:1px solid #999999;
width:100%;
margin:5px -4px; /* 4px = border+padding on one side */
padding:3px;
}
The value of the padding has a role to play. Using the style you posted:
textarea {
border:1px solid #999999;
width:100%;
margin:5px 0;
padding:3px;
}
The width is already filled up and you have padding left, right to be 3px. So there will be an overflow.
If you change your style to this:
textarea
{
border:1px solid #999999;
width:98%;
margin:5px 0;
padding: 3px 1%;
}
What my styling is doing now is it has a width of 98% and its remaining 2% to complete a 100% and that is why I gave padding left 1% and padding right 1%. With this, the issue of overflow should be fixed
In snippet below padding-top overrides the height and max-height properties of container:
I want this <div> to be 10px high, but its 100px because of padding-top
as far as I understand this should be solved by box-sizing: border-box but this doesn't help
w3schools - border-box: the width and height properties (and min/max properties)
includes content, padding and border, but not the margin
.padding-test {
background: linear-gradient(109deg, #3adffd, #00abfb);
outline: 1px solid #3b3c6d;
width: 100%;
padding-top: 100px;
max-height: 10px;
height: 10px;
box-sizing: border-box;
}
<div class='padding-test'></div>
Can someone explain why is this happening and how to fix this?
Same happens for width and padding-left
UPD: I faced this issue when tried to change max height for box sized by aspect-ratio approach. I solved initial issue by setting parent size, but I still want to understand how border-box works with the padding - does it shrinks only content? is this correct behavior? is there any solution for this exact situation - can I override padding somehow?
I had run into the same doubt. According to MDN:
border-box
The width and height properties include the content, padding, and border, but do not include the margin. Note that padding and border will be inside of the box. For example, .box {width: 350px; border: 10px solid black;} renders a box that is 350px wide, with the area for content being 330px wide. The content box can't be negative and is floored to 0, making it impossible to use border-box to make the element disappear.
so box-sizing: border-box doesn't mean you can set the "border box" directly, but only affects how "content box" is calculated, which cannot be negative.
And my solution is: avoid the paddings, use a height-holding div or ::before pseudo element with designated height instead. (may also need overflow: hidden.) For example:
.padding-test {
height: 10px;
box-sizing: border-box;
overflow: hidden;
}
.padding-test::before {
height: 100px;
content: '';
display: block;
}
I have this:
<div class="wrapper">
<input type="text"/>
</div>
div{
border: 1px solid red;
width: 300px;
}
input{
width: 100%;
padding: 10px;
}
I need the input to be 100% of the parent div, but also I need this input to have 10px padding. Results can be seen here: http://jsfiddle.net/pdJYF/
How can I achieve this?
Add box-sizing to your input field:
input{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 10px;
}
Example Fiddle
Browser Compatibility
The underlying "problem" is the box model of HTML/CSS. As you can see in the illustration of the respective MDN article each element's box has 4 different areas: margin box, border box, padding box and content box.
When you assign measures (width or height) to the element, this is applied to one of these areas. If the area is, e.g., the content box, then for the total size of the element margin, border and padding is added. So you wont set the total dimensions of the box, but one of its contained boxes.
The CSS property box-sizing tells the browser, which box to use, when calculating the element's dimensions. The default value is content-box. So in the above example values for margin, border and padding get added and hence the element is too big. By setting the box model to border-box, only the margin gets added to the dimensions (which is zero here) and the elements fits.
Why you don't put the padding in percentage too:
input{
width: 94%;
padding: 0 3%;
border:0;
}
You must decrease 2x padding from left and right, and decrease 2x for any pixel you want use like this and insert your input's width.
For example: 20px (paddings left & right) + 2px (borders left & Right )= 22px
300px - 22px = 278px
div { border: 1px solid red; width:300px; }
input { width: 278px;padding: 10px; }
I'm struggling to determine where in my CSS the padding/margins should go to keep seperation between parent and child containers. For example, if you have have a parent div with two nested children and you need to have even 10px spacing between the children and also have the children be spaced 10px from the parent; then would you add padding to parent div {padding:10px} and then just add 10px of margin between the children? Or would you leave the parent at 0 padding and have the children define what separation they need from each other and also their parents?
Here's the original fiddle showing both examples, and a snippet showing the same thing
.parent1 { /*spaces itself from its children*/
display: inline-block;
padding: 10px;
font-size: 0;
border: 1px solid red;
}
.child1 {
display: inline-block;
margin-right: 10px;
font-size: 12pt;
border: 1px solid blue;
}
.child2 {
display: inline-block;
font-size: 12pt;
border: 1px solid green;
}
.parent2 { /*has not spacing from its children*/
display: inline-block;
font-size: 0;
border: 1px solid red;
}
.child3 {
display: inline-block;
margin: 10px;
font-size: 12pt;
border: 1px solid blue;
}
.child4 {
display: inline-block;
margin-right: 10px;
font-size: 12pt;
border: 1px solid green;
}
<div class="parent1">
<div class="child1">child1</div>
<div class="child2">child2</div>
</div>
<br/>
<br/>
<div class="parent2">
<div class="child3">child3</div>
<div class="child4">child4</div>
</div>
For me it depends entirely on the semantic meaning of the nodes in question -- what is the parent, what are the children?
Does the parent "want" space within it to keep its content away from its borders (padding)? Or do the children "want" distance between and amongst themselves and their parent (margin)?
The answers to those questions are based on the purpose each node serves (I'm big into semantic markup and avoid presentational markup)
In your case, without knowing further meaning, it sounds like the children want to be 10px from everything, so I would give them margin: 10px; on all sides. The margin collapse between the two children would leave only the 10px gap there, and they'd be 10px away from everything else surrounding them.
I usually go for padding on the parent container. Then margin between the children. If I had an ul with 10 li children, for example, I'd add 10px padding to the ul, 10px margin-bottom to the li, and 0px margin-bottom to the li:last-of-type...
I don't know, it varies with the situation, and your interpretation of it, I guess. In my example, since I believe the space between the ul and the li belongs to the ul, I make it the ul's padding. The space between the lis belongs to them, so I make it their margins.
Not much of a help, huh?
The CSS margin attribute is on the outside whereas padding
is within the DIV block. I am not sure if that is what you want -
documented here:
When to use margin vs padding in CSS
I just verified and the margin attribute does work inside a nested DIV also.
So that is an alternative to padding.
IF, however, the position in the class is absolute, the padding shouldn't matter. But
if you use absolute positions, all the DIV's would have to have
absolute positions to avoid a potential conflict, and you would have
to know the client's minimum screen size (absolute may not be a good idea).
NOTE: If any of your clients are still using IE5, that browser
has a padding bug that was supposed to be fixed in IE6.
http://forums.devshed.com/css-help-116/css-padding-inside-absolute-div-70789.html
Hi all i am not a HTML expert i am learner so what i have learnt from the web industry so i am sharing on the behalf of that.
According of me Padding is the inner space of an element, and margin is the outer space of an element.
Paddings :- If you will use padding in parent container than you will have to adjust width and height of the parent container otherwise parent will add the padding in his width & height.
Margins :- If you will use margins in child container than you don't need to touch the parent container width & height because child container will start from the required area.
or see your updated fiddle example i have played with margins in child container because when i used padding in parent container i adjusted the width & height of that but when i used margins don't need to adjust the parent container see the demo :- http://jsfiddle.net/WSTv6/1/
& can read more about margin & padding
I have the following CSS and HTML snippet being rendered.
textarea
{
border:1px solid #999999;
width:100%;
margin:5px 0;
padding:3px;
}
<div style="display: block;" id="rulesformitem" class="formitem">
<label for="rules" id="ruleslabel">Rules:</label>
<textarea cols="2" rows="10" id="rules"></textarea>
</div>
Is the problem is that the text area ends up being 8px wider (2px for border + 6px for padding) than the parent. Is there a way to continue to use border and padding but constrain the total size of the textarea to the width of the parent?
Why not forget the hacks and just do it with CSS?
One I use frequently:
.boxsizingBorder {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
See browser support here.
The answer to many CSS formatting problems seems to be "add another <div>!"
So, in that spirit, have you tried adding a wrapper div to which the border/padding are applied and then putting the 100% width textarea inside of that? Something like (untested):
textarea
{
width:100%;
}
.textwrapper
{
border:1px solid #999999;
margin:5px 0;
padding:3px;
}
<div style="display: block;" id="rulesformitem" class="formitem">
<label for="rules" id="ruleslabel">Rules:</label>
<div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>
</div>
let's consider the final output rendered to the user of what we want to achieve: a padded textarea with both a border and a padding, which characteristics are that being clicked they pass the focus to our textarea, and the advantage of an automatic 100% width typical of block elements.
The best approach in my opinion is to use low level solutions as far as possible, to reach the maximum browsers support.
In this case the only HTML could work fine, avoiding the use of Javascript (which anyhow we all love).
The LABEL tag comes in our help because has such behaviour and is allowed to contain the input elements it must address to.
Its default style is the one of inline elements, so, giving to the label a block display style we can avail ourselves of the automatic 100% width including padding and borders, while the inner textarea has no border, no padding and a 100% width.
Taking a look at the W3C specifics other advantages we may notice are:
no "for" attribute is needed: when a LABEL tag contains the target input, it automatically focuses the child input when clicked;
if an external label for the textarea has already been designed, no conflicts occur, since a given input may have one or more labels.
See W3C specifics for more detailed information.
Simple example:
.container {
width: 400px;
border: 3px
solid #f7c;
}
.textareaContainer {
display: block;
border: 3px solid #38c;
padding: 10px;
}
textarea {
width: 100%;
margin: 0;
padding: 0;
border-width: 0;
}
<body>
<div class="container">
I am the container
<label class="textareaContainer">
<textarea name="text">I am the padded textarea with a styled border...</textarea>
</label>
</div>
</body>
The padding and border of the .textareaContainer elements are the ones we want to give to the textarea. Try editing them to style it as you want.
I gave large and visible padding and borders to the .textareaContainer element to let you see their behaviour when clicked.
If you're not too bothered about the width of the padding, this solution will actually keep the padding in percentages too..
textarea
{
border:1px solid #999999;
width:98%;
margin:5px 0;
padding:1%;
}
Not perfect, but you'll get some padding and the width adds up to 100% so its all good
I came across another solution here that is so simple: add padding-right to the textarea's container. This keeps the margin, border, and padding on the textarea, which avoids the problem that Beck pointed out about the focus highlight that chrome and safari put around the textarea.
The container's padding-right should be the sum of the effective margin, border, and padding on both sides of the textarea, plus any padding you may otherwise want for the container. So, for the case in the original question:
textarea{
border:1px solid #999999;
width:100%;
margin:5px 0;
padding:3px;
}
.textareacontainer{
padding-right: 8px; /* 1 + 3 + 3 + 1 */
}
<div class="textareacontainer">
<textarea></textarea>
</div>
This table hack code works for me in all browsers from IE8+
<td>
<textarea style="width:100%" rows=3 name="abc">Modify width:% accordingly</textarea>
</td>
I was looking for an inline-styling solution instead of CSS solution, and this is the best I can go for a responsive textarea:
<div style="width: 100%; max-width: 500px;">
<textarea style="width: 100%;"></textarea>
</div>
The problem lies in the box-sizing property.
By default, the initial value of the box-sizing property is content-box.
so you have something like this under the hood:
textarea {
border:1px solid #999999;
width:100%;
margin:5px 0;
padding:3px;
box-sizing: content-box;
}
box-sizing: content-box; means that the width of the actual element is equal to the width of the element's content box.
so when you add padding (in this case padding-right and padding-left --> because we are talking about width) and border (in this case border-right and border-left --> because we are talking about width), these values get added to the final width. so your element will be wider than you want.
set it to box-sizing: border-box;. so the width will be calculated like so:
horizontal border + horizontal padding + width of content box = width
in this case, when you add horizontal border and horizontal padding, the final width of element does not change, in fact, the content box will shrink to satisfy the equation.
You can make use of the box-sizing property, it's supported by all the main standard-compliant browsers and IE8+. You still will need a workaround for IE7 though. Read more here.
No, you cannot do that with CSS. That is the reason Microsoft initially introduced another, and maybe more practical box model. The box model that eventually won, makes it inpractical to mix percentages and units.
I don't think it is OK with you to express padding and border widths in percentage of the parent too.
If you pad and offset it like this:
textarea
{
border:1px solid #999999;
width:100%;
padding: 7px 0 7px 7px;
position:relative; left:-8px; /* 1px border, too */
}
the right side of the textarea perfectly aligns with the right side of the container, and the text inside the textarea aligns perfectly with the body text in the container... and the left side of the textarea 'sticks out' a bit. it's sometimes prettier.
For people who use Bootstrap, textarea.form-control can lead to textarea sizing issues as well. Chrome and Firefox appear to use different heights with the following Bootstrap CSS:
textarea.form-conrtol{
height:auto;
}
I often fix that problem with calc(). You just give the textarea a width of 100% and a certain amount of padding, but you have to subtract the total left and right padding of the 100% width you have given to the textarea:
textarea {
border: 0px;
width: calc(100% -10px);
padding: 5px;
}
Or if you want to give the textarea a border:
textarea {
border: 1px;
width: calc(100% -12px); /* plus the total left and right border */
padding: 5px;
}
How about negative margins?
textarea {
border:1px solid #999999;
width:100%;
margin:5px -4px; /* 4px = border+padding on one side */
padding:3px;
}
The value of the padding has a role to play. Using the style you posted:
textarea {
border:1px solid #999999;
width:100%;
margin:5px 0;
padding:3px;
}
The width is already filled up and you have padding left, right to be 3px. So there will be an overflow.
If you change your style to this:
textarea
{
border:1px solid #999999;
width:98%;
margin:5px 0;
padding: 3px 1%;
}
What my styling is doing now is it has a width of 98% and its remaining 2% to complete a 100% and that is why I gave padding left 1% and padding right 1%. With this, the issue of overflow should be fixed