I have a div with a letter :
HTML
<div>A</div>
CSS
div {
border: 1px solid black;
background-color: #CC0000;
width: 150px;
height: 150px;
margin: 10px 5px 5px 50px;
padding: 0px 30px 0px 10px /* I want to move my letter with it */
}
The letter moves due to padding property, but it also makes the square larger.
Why does padding transform the square into a rectangle?
JSF : http://jsfiddle.net/fnBaD/1
The standard 'box model' does NOT include padding/borders into width/height calculations
By adding the box-sizing:border-box property it will force the browser to INCLUDE the padding/borders in the dimensions
It's often seen in a universal selector
* {
box-sizing:border-box;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Padding is always applied 'within' the element. Hence,
padding:5px;
is effectively adding 5px on all four sides 'within' an element.
Hence, the padding property makes elements larger.
Padding is considered to be part of the element it is applied to. This is why the element gets larger.
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
I am new to HTML programming. Is it possible to make a border to the margin instead of the padding? I need this just for design purposes only.
Is it possible to make a border to the margin instead of the padding?
Yes. The closest way I can think of to achieve this effect is using the CSS background-clip property:
background-clip: padding-box;
This clips any backgrounds in the element not to be rendered in the border region, thus treating it like a margin rather than padding.
Below is an example of the difference:
div {
border: 5px dashed #000; /* to see through border */
background-color: #0FF; /* to show extent of background */
padding: 5px;
margin: 10px;
}
.adjusted {
background-clip: padding-box; /* corrects extent of background */
}
<div>Default Border</div>
<div class="adjusted">Corrected Border</div>
In the "corrected" div, the border becomes part of the margin visually rather than part of the padding.
Make your padding the size your your current padding + margin, then set your margin to 0 pixels. This will have the same effect.
I don't think this is possible but if you want to enclose the margin within a border then there can be a workaround.
Enclose the element with span and set the border for that span element as,
.inner{
padding: 5px;
margin: 5px;
}
.outer{
border: 1px solid black;
}
<div class="outer">
<p class="inner">Hello</p>
</div>
Here is a demo
I have the following part of my html
<div class="header">
<div class="header-bar">
<div class="pull-left">
<div class="title">Ci models database</div>
</div>
</div>
<div class="clear-both"></div>
<ol class=breadcrumb>
<li class="active">All models</li>
</ol>
</div>
the css(breadcrumb and active classes are bootstrap)
.header-bar {
border: None;
background-color: #66CCFF;
min-height:30px;
}
.title {
padding: 5px 5px 10px 5px;
color: white;
font-size: large;
}
.clear-both{
clear:both;
}
But between header-bar and breadcrumb html added a white space(see bootply). How can I remove this white space, since no padding and margin can be found between to divs.
The problem is that the calculated height of the internal .title div is greater than the calculated height of the container .header-bar. Properties like height, min-height, border, padding can directly effect heights, whereas properties like display, box-sizing and position can all indirectly effect height.
The result is the internal .title div pushes down the next div in the flow by 10px.
CSS has no rules that say a div must contain it's children in height and stop them from effecting other divs, even when height is directly defined. We need to tell it exactly how it should behave when things are rendered.
There are several ways to fix this:
http://www.bootply.com/Qa1ME2M2uk - use overflow: hidden; on the parent. Overflow is a css property which is used how to control what happens when child elements are larger than their parents. It's worth noting that depending on other properties overflow won't necessarily render itself in a way that disrupts layout.
http://www.bootply.com/ssq3EAzeyk - set explicit heights to take strict control over the dimensions of the elements. This might be the best option for a header bar.
http://www.bootply.com/yeodYRLLJk - set a greater min-height on the parent, one which will definitely contain the child. This is useful if your padding is for alignment purposes - setting min-height: 40px; in the example does this.
http://www.bootply.com/GznfJxUWUF - remove the padding that is making the element calculate as taller (as mentioned in another answer).
Apostolos, the white space is coming from the .titleclass.
The bottom padding of 10px.
Zero this and the white space will go.
.title {
padding: 5px 5px 0px 5px;
you will have to add a float: left to both parent containers (.header-bar and breadcrumb) otherwise the clear won't affect anything. furthermore you will have to give both containers width: 100%
.header-bar {
border: None;
background-color: #66CCFF;
min-height:30px;
width: 100%;
float: left;
}
.breadcrumb {
width: 100%;
float: left;
}
.title {
padding: 5px 5px 10px 5px;
color: white;
font-size: large;
}
.clear-both{
clear:both;
}
In the "CSS The definitive Guide", the author said "The values of these seven properties must add up to the width of the element’s containing block, which is usually the value of width for a block element’s parent". But In the following, the child element is wider than the parent.
//html
<div class="wrapper">
<div class="content-main">
<div class="main">This is main</div>
</div>
</div>
// style
.wrapper {
width: 500px;
padding: 30px 0;
border: 1px solid #0066cc;
}
.content-main {
padding: 0 20px;
border: 2px solid #00CC33;
}
.main {
width: 500px;
border: 1px solid #f00;
}
So I have two quesions:
What does the author mean for the "seven properties must add up to the width of the element’s containing block".
Why in my example, the element will stick out the parent.
in the edit version, the seven properties add up to the width of the element' containing block seems work well. Why the equation not apply to my example?
EDIT VERSION
p.wide width is 438px, the author calculate as following
10px(left margin) + 1(left border) + 0 + 438px + 0 + 1(right border) – 50px(right margin) = 400px(parent width)
// HTML
<div>
<p class="wide">A paragraph</p>
<p>Another paragraph</p>
</div>
// CSS
div {width: 400px; border: 3px solid black;}
p.wide {
margin-left: 10px; width: auto; margin-right: -50px;
border: 1px solid #f00;
}
What does the author mean for the "seven properties must add up to the width of the element’s containing block".
He is teaching you CSS Box Model, here, you are using div elements which are block level in nature, block level means they take up entire horizontal space by default, unlike span or i or b tags, which are inline elements.
So when you use padding or border they are added outside of the element and not inside. So for example you have an element of say 100x100 in dimension, and you add a padding like
element {
width: 100px;
height: 100px;
padding: 10px;
}
So in the above case, your element will be 120x120 in total, because it will add up 10px of padding on all four size of your element.
Explaining padding syntax
You have two different padding syntax, which are as follows...
padding: 30px 0; in .wrapper and padding: 0 20px; in .content-main so these aren't the same.
Both the above syntax are nothing but short hand syntax of padding ... The complete version looks like...
padding: 5px 10px 15px 20px; /*Nothing to do with your code, this is just a demo */
So in the above example, you have to go clock wise, so 5px is nothing but padding-top: 5px;, then comes 10px which is right, next is bottom and the last 20px is padding-left.
So what when it's just two parameters defined, that means...
padding: 0 20px;
--^---^---
top bottom/left right
So, top and bottom are set to 0 here and right and left to 20px respectively...
Explaining the CSS
Note: None of the element has the height set by you, so the screens
you see ahead which I've attached are computed. So ignore height in them
completely.
.wrapper {
width: 500px;
padding: 30px 0;
border: 1px solid #0066cc;
}
Here, your element is 502px wide, so why? As I said that border will add on all four sides of the element, and hence it will add 1px on all four sides but your padding is applied to top and bottom only. It's better to use tools like Firebug which will show you graphical presentation of what's going on behind the scenes.
Coming to the second snippet which has the following syntax
.content-main {
padding: 0 20px;
border: 2px solid #00CC33;
}
Here, it is now adding 2px border to your element but, the padding is now applied to left and right and nothing for top and bottom so now the computation will be
Coming to the last snippet which is
.main {
width: 500px;
border: 1px solid #f00;
}
Here, just border is applied, but why it goes out? In technical words, why it overflows? Because you have width defined. So since you have padding set for the parent element, which is padding: 0 20px;, so it will nudge the child element by 20px from the left side. I'll attach a screen of Firebug to show you why it is nudged....
Why in my example, the element will stick out the parent.
Because you are defining width of 500px to your .main div
Demo (What happens when you take out the width)
The default box model is known as content-box
This can be altered by defining a new CSS3 introduced property called box-sizing set to border-box which will alter your box-model in such a way that it will count the padding and border inside the element instead of outside
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; }