Is there a way to give a div element some padding INSIDE its border? For example, currently all the text inside my main div element goes right to the edge of the element's border. I'd like, as a general rule on this site, to have at least 10 to 20 px of space between the text and the border.
Here's a screen shot to illustrate what I currently have:
The CSS property you are looking for is padding.
The problem with padding is that it adds to the width of the original element, so if you have a div with a width of 300px, and add 10px of padding to it, the width will now be 320px (10px on the left and 10px on the right).
To prevent this you can add box-sizing: border-box; to the div, this makes it maintain the designated width, even if you add padding.
So your CSS would look like this:
div {
box-sizing: border-box;
padding: 10px;
}
you can read more about box-sizing and it's overall browser support here:
https://www.paulirish.com/2012/box-sizing-border-box-ftw/
I see a lot of answers here that have you subtracting from the width of the div and/or using box-sizing, but all you need to do is apply the padding the child elements of the div in question. So, for example, if you have some markup like this:
<div id="container">
<p id="text">Find Agents</p>
</div>
All you need to do is apply this CSS:
#text {
padding: 10px;
}
Here is a fiddle showing the difference: https://jsfiddle.net/CHCVF/2/
Or, better yet, if you have multiple elements and don't feel like giving them all the same class, you can do something like this:
.container * {
padding: 5px 10px;
}
Which will select all of the child elements and assign them the padding you want. Here is a fiddle of that in action: https://jsfiddle.net/CHCVF/3/
Just use div { padding: 20px; } and substract 40px from your original div width.
Like Philip Wills pointed out, you can also use box-sizing instead of substracting 40px:
div {
padding: 20px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
The -moz-box-sizing is for Firefox.
Padding is a way to add kind of a margin inside the Div.
Just Use
div { padding-left: 20px; }
And to mantain the size, you would have to -20px from the original width of the Div.
Related
For example:
.large{
font-size: 200%;
}
.bluebox{
background-color: blue;
height: 200px;
padding-left: 20px;
width: 200px;
}
<div class="bluebox">
<p class="large">This is a bigger paragraph</p>
</div>
I want to keep div in fixed widht and height when I add padding to the content. (Yes I can pre-calculate padding and then give proper width but if there is a simpler way?)
box-sizing: border-box; is what you're looking for.
It changes the default CSS box model to calculate widths and heights of elements including borders and padding but not margin.
6.1. ‘box-sizing’ property
border-box
The specified width and height (and respective min/max properties) on
this element determine the border box of the element. That is, any
padding or border specified on the element is laid out and drawn
inside this specified width and height.
EXAMPLE HERE
The following CSS should work
box-sizing: border-box;
padding:12px;
Is there any way that i can align the text inside a div but without using text-align. I dont want to align it to a specific position(center,left etc) but i want to align it where ever i want by pixel.For example between the values center and left. Also i dont want to use another element inside div.
I am looking something like that:
HTML
<div id="div">TEXT</div>
CSS
#div{
text-align:220px;
}
Any ideas?
Are you looking for text-indent ?
#div{
text-indent: 220px;
}
If you use margin or padding to align the text, they will increase the size of your element as well, if you are aware of the CSS box model behavior, so if you are aligning them using padding or margin make sure you use the below
div {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Though above will count the margin outside but will consider the padding and border inside the element.
Also, if you are looking to align only a single word, than better use text-indent property which will indent your text to a specific px you define.
Demo
But this will just indent 1st line so if you have a single word than this will suffice your needs, but if you want to align multiple elements, than the best thing to do here is to use span for each word and than indent it using padding
No you can not, text-align gives a general behavior for the text to align as opposed to px which is a measuring unit, also, logically speaking....220px wont tell browser, which side of screen 220px is referring to....i'll suggest using <p> or <span> instead
#div > span, #div > p{
/*some margin or padding like
margin-left : 220px;
padding-left : 220px;
*/
}
EDIT
To avoid a tag inside div, use :
div#cont {
width:300px;
height:400px;
padding-left:150px; /*left-right-top-bottom-depend on ur choice*/
border:1px solid #000;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
solution demo
I have unordered list of images, in a responsive design. The images scale properly, when I resize window. But the trouble is wrapper UL element, which don't adjust its height accordance with image height. This create a big gab before following P element.
http://jsfiddle.net/6qrad/1/
How can I achieve height of ul element to adjust accordingly without floating li.
First of all whenever you are going for responsive design, be sure you use the below snippet
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
If you are aware of the CSS box model, the above will do exact opposite of that, it will count the padding, border inside the element instead of outside the element.
Now coming to the solution, you are using column-count property which I think is not required in your case, you can simply use float: left; and than use overflow: hidden; to clear the floating li
Demo
Use font-size: 0; if you want to get rid of the remaining pink portion at the bottom. (Using width: 33.33% to be precise, which will get rid of the pink color on the right hand side as well.)
Demo 2 (With gaps, used padding)
Also, as I was editing the question, you've mentioned you don't want to float, so I don't see any specific reason for not doing so, but still if you don't want to float, you can use display: inline-block; with a width set to 33% each, also make sure you use margin-left: -4px; to deal with the white-space by making your li elements inline-block
As you can see from this example, the input seems to "overflow" its parent div. I'd like to add padding to the input without making it overflow its parent.
I would like to know the best solution/workaround for every browser (including IE, Firefox, Chrome, etc).
You can see this answer, but if you don't like it, you can use box-sizing CSS3 property like this:
input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Live jsFiddle example
Padding adds to the width of your object. One option would be to remove the left/right padding from the input and just use text-indent, although this removes the right padding.
.inside{
background: blue;
border: none;
padding-bottom: 10px;
padding-top: 10px;
text-indent: 10px;
width: 100%;
}
Alternatively, instead of using hardcoded pixel-widths for your padding, you could use percentages, and subtract that value from the width:
.inside{
padding: 3%;
width: 94%;
}
Don't specify the width of the inside div as 100%. A div will automatically fit the width of its parent container. Demo
Looks like the input is inside the div but is located in the top left corner. Because the input takes-up 100% of the div's width it obscures the red background of the div. The div is longer so it sticks out the bottom making it seem like the input is on-top. Do the following:
Apply the padding to the CSS of the outside div not the input box.
You could apply a margin to the input if you want but I think padding
the containing div is better.
Make the input box less wide than the div (<100%)
I am creating a site with DIVs. Everything's working out except when I create a DIV. I create them like this (example):
newdiv {
width: 200px;
height: 60px;
padding-left: 20px;
text-align: left;
}
When I add the padding-left property, the width of the DIV changes to 220px, and I want it to remain at 200px.
Let's say I create another DIV named anotherdiv exactly the same as newdiv, and put it inside of newdiv but newdiv has no padding and anotherdiv has padding-left: 20px. I get the same thing, newdiv's width will be 220px.
How can I fix this problem?
Add property:
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
Note: This won't work in Internet Explorer below version 8.
Put a div in your newdiv with width: auto and margin-left: 20px
Remove the padding from newdiv.
The W3 Box model page has good info.
Try this
box-sizing: border-box;
If you would like to indent text within a div without changing the size of the div use the CSS text-indent instead of padding-left.
.indent {
text-indent: 1em;
}
.border {
border-style: solid;
}
<div class="border">
Non indented
</div>
<br>
<div class="border indent">
Indented
</div>
simply add box-sizing: border-box;
A lot of the answers above are correct, but provided little explanation, so i decided to add this for anyone that might need it.
By default, every element box-sizing parameter is set to content-box.
Which means, that if you set an element width to 200px and then add a padding of 20px on both horizontal end, this would result to a total width of 240px for that element.
to fix this, you simply need to update the box-sizing parameter and set this to border-box in your css. Or you can do this for all elements by simply adding the following.
* {
box-sizing: border-box
}
This tells the browser to account for any border and padding in the values you specify for an element's width and height.
So for an element set to border-box with a width of 200px, and a padding of 20px on both sides, it's total width would still remain 200px (160px as content box and 40px as padding).
Hope that helps. You read more on css box-sizing
when I add the padding-left property,
the width of the DIV changes to 220px
Yes, that is exactly according to the standards. That's how it's supposed to work.
Let's say I create another DIV named
anotherdiv exactly the same as newdiv,
and put it inside of newdiv but newdiv
has no padding and anotherdiv has
padding-left: 20px. I get the same
thing, newdiv's width will be 220px;
No, newdiv will remain 200px wide.
This would work in all cases, with this the extra padding included in predefined width
box-sizing: border-box;
just change your div width to 160px
if you have a padding of 20px it adds 40px extra to the width of your div so you need to subtract 40px from the width in order to keep your div looking normal and not distorted with extra width on it and your text all messed up.