I've got several <div>s inside another <div>, and they fit just right, but I would like to add a border to distinguish between them. However, when I add a border or an outline, it shows surrounding the outside of the div. Is there a way to get it so that the border will be inside the edge of the div?
Example: http://jsfiddle.net/5cSke/11/
I would like the inner <div>s to all stay within the outer div, and for the borders not to expand and cover anything outside the inner <div>s.
EDIT (Partial Solution): I was able to find a partial solution by setting the overflow of the containing div to hidden, which prevented the borders from spreading beyond the outer <div>, but not from spreading between the <div>s within it.
That's how the box model works. There is a CSS3 box-sizing: border-box style that will let you do what you want.
Updated Fiddle: http://jsfiddle.net/5cSke/14/
you can make several divs within each other just give specify style for each one using
div id or class
<style>
div {
border : 2px solid red;
}
div #test2 {
border : 1px solid black;
}
</style>
<div id="test1">
main div
<div id="test2">inner div</div>
<br>
</div>
for more information
Nested DIV elements
I don't think there's a way to prevent the border from appearing on the outside of your divs. I would instead recommend setting background colours on your divs in order to distinguish between them.
There might be a new css 3 property to do stuff like that. But there is a more elegant solution. Give each div an rgba value with some opacity. Overlapping (or) nested divs will have a darker background then its parent.
Working Example
Related
Sorry. I had to edit my question: I made the second image in Photoshop.
**I am trying to find a DIV equivalent to a Table. How do you get divs to behave like TDs: All TDs adjust their height as the content grows, and all TDS have the same height to the bottom of the Table element. ** Why is this so hard with DIVs? After all these years, is'nt there a standard solution?
How do you get the two column divs to always be the same height (or always go down to the bottom) of the container DIV?
As the innner content grows, the wrapper DIV (in red) will grow with it, and maintain its padding (just like a table would).
yeah, your concept appears really tough to accomplish in CSS alone, for some reason. JQuery could handle it a lot better if you're open to it.
At any rate, here is is another alternative. It uses a clever trick as follows:
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
Check it out here:
http://jsfiddle.net/jplew/yPMVJ/
try this
<div name="outer">
<div name="inner>put your contents here</div>
<div style="clear: both"></div>
</div>
you need a div that has the "clear:both" style (clear both simple makes the div takes up a entire line, nothing can float around it) at the very end of your inner divs so the outer div knows to extend to the end.
Possibly you have floats in the children divs. In that case you can do either of the followings:
Add overflow:auto; to the parent div's style.
Use CSS Clearfix
Add another tag (last tag under the parent div) containing clear:both style like the answer above.
I mocked up a solution on JSfiddle using simple percentages:
http://jsfiddle.net/xLSQX/
Otherwise, as mentioned above pay attention to the overflow: attribute and clear: both.
I want all the divs inside the container to act like table cells and the outer div to act like the element. The height of the outer div to be flexible and adjust to the height of all the content inside the other divs.
Here is jsfiddle example
Here is the code..
<div id="xxx1">
<div class="xxx1">
txt
</div> </div>
And CSS
#xxx1{
border:1px solid black;
min-height:25px;
}
.xxx1{
border:1px solid green;
height:50px;
position:relative;
top:-50px;
}
I want to remove extra space from div id "xxx1". How to do that? And I cannot use fixed height cause I want that div to increase its height if I want to add some more data inside that div.
Here is jsfiddle example
Provided I understood the question, get rid of padding on body.
jsFiddle
body {
margin:0;
}
You may also find box-sizing:border-box useful which integrates border and padding into width and height
jsFiddle
#xxx1{
box-sizing: border-box;
}
.xxx1{
box-sizing: border-box;
}
Edit
RE: no.. I want to remove blank space inside div id "xxx1".
Well you can do that in a variety of ways, the right way would depend on what the context is. Here are a couple:
Position .xxx1 using position:absolute so it's taken out of the flow of the page. jsFiddle
Set height:0px and set it with JavaScript when you add content to it.
Here try to change it like this
.xxx1{
border:1px solid green;
height:auto;
position:relative;
}
you cant remove the spacing added by relative positioning. setting the padding and margin on the body wont do it. setting the box-sizing wont do it. setting the font size to 0 wont do it. doing something with javascript is just silly.
You have these options:
make the next item have a negative margin (ick).
float the item, tho this wont allow overlapping (if you need that)
set the outer div to a relative position and the item you want to move to absolute position (and set the top (or bottom) and left (or right) values. this positions the item you want to move according to its outer div (not the window).
Number 3 is almost always the best way to go. Think about how the page will change with variable content to make sure you choose the right option (and correct corner to position from).
If the outer div that you set to a relative position is not adjusted in space (using top/bottom/left/right), then that div does not have any extra unwanted space. If you need to adjust the outer div AND the inner div, set all moving divs as absolute, and the closest parent as relative; the movement (top/bottom/right/left) will be based on that relative parent.
HTML:
<div> <p></p> </div>
CSS:
div { background-color:green; border-top:1px solid white; }
p { background-color:yellow; height:50px; margin:70px; }
Demo: http://www.jsfiddle.net/Xy8QF/4/
Why is the area above the yellow paragraph green, and the area bellow it white?
btw I already figured this out, but I thought I'll post this anyway. Consider it a riddle :)
Update: Just to add to the accepted answer:
Only vertical margins collapse
The margins will not collapse if the outer element (in this case the DIV) has a padding or border
This happens because the margins of two block elements with position:static (the default) collapse as per CSS 2.1 8.3.1, i.e. the margin is "carried over" to the body element. This demo shows it does not happen with absolutely positioned elements, one of the exceptions (along with a non-none border) listed in the aforementioned standard.
Good question. :) You can solve it by giving the div a bottom border, or if you don't want to, by giving it a height of 100%. ;-)
The area above the yellow paragraph as you put it, is not actually above it. The green div contains the yellow paragraph. The yellow paragraph has a margin of 70px, pushing away from the green edges of its container. The yellow paragraph has a height set to it, hence we cannot see the yellow pushing away from the green on the bottom edge.
It's because the <p> is right against the bottom of the enclosing <div>. Since there's nothing constraining the height of the <div>, the rendering gives just enough space to fit down to the bottom of the <p>. Any explicit height > 50px will show the bottom.
Yup, on the update, exactly. The box expands vertically, but not horizonally. Also, padding puts space on the inside of the box, so the p can't push right up against the bounds.
Read up on the CSS box model, for example here:
http://www.w3schools.com/css/css_boxmodel.asp
and here: http://www.w3.org/TR/CSS21/box.html
what do the background refer to in the box model (content, padding, border and margin)?
in other words, which part of the box model will be set to display a background color if i set it to green?
and is it just block elements (div, heading etc) that applies to the box model? do inline elements (span, text) got padding, border and margin too?
The elements full occupancy, not including space occupied by margins. You could test this with the following markup/css:
.block { margin:5px; padding:0; width:25px; height:25px;
background-color:orange; float:left; }
<div class="block"></div>
<div class="block"></div>
Render that, and you'll find a total of 10px between the orange boxes - our margins.
Inline elements do have padding and margins too, but you can't always use them the same way, since they're inline, not block-level.
This small chart will demonstrate how a box appears within the browser:
box-chart http://img132.imageshack.us/img132/2692/boxchart.jpg
As you can see, the margin is the space between the box itself and any content that might be surrounding it. The border is simply a line around the box. The padding is the space between the edge of the box and the content within the box. Any backgrounds you set will fill the entire box (within the borders) still maintaining the margin (blank space) around the box.
Just about every element can use margin, background, and border I believe. However, some elements do not support padding unless it is block-level, because it would basically be the exact same thing as margin. You can always test out different styles to see what works and what doesn't and how things get moved around based on the styles you set up.
What is the difference between margin and padding in CSS?
In what kind of situations:
both work.
only margin is appropriate.
only padding is appropriate.
TL;DR: By default I use margin everywhere, except when I have a border or background and want to increase the space inside that visible box.
To me, the biggest difference between padding and margin is that vertical margins auto-collapse, and padding doesn't.
Consider two elements one above the other each with padding of 1em. This padding is considered to be part of the element and is always preserved.
So you will end up with the content of the first element, followed by the padding of the first element, followed by the padding of the second, followed by the content of the second element.
Thus the content of the two elements will end up being 2em apart.
Now replace that padding with 1em margin. Margins are considered to be outside of the element, and margins of adjacent items will overlap.
So in this example, you will end up with the content of the first element followed by 1em of combined margin followed by the content of the second element. So the content of the two elements is only 1em apart.
This can be really useful when you know that you want to say 1em of spacing around an element, regardless of what element it is next to.
The other two big differences are that padding is included in the click region and background color/image, but not the margin.
div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }
div.padding > div { padding-top: 20px; }
div.margin > div { margin-top: 20px; }
<h3>Default</h3>
<div class="box">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<h3>padding-top: 20px</h3>
<div class="box padding">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<h3>margin-top: 20px; </h3>
<div class="box margin">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
Margin is on the outside of block elements while padding is on the inside.
Use margin to separate the block from things outside it
Use padding to move the contents away from the edges of the block.
The best I've seen explaining this with examples, diagrams, and even a 'try it yourself' view is here.
The diagram below I think gives an instant visual understanding of the difference.
One thing to keep in mind is standards compliant browsers (IE quirks is an exception) render only the content portion to the given width, so keep track of this in layout calculations. Also note that border box is seeing somewhat of a comeback with Bootstrap 3 supporting it.
There are more technical explanations for your question, but if you want a way to think about margin and padding, this analogy might help.
Imagine block elements as picture frames hanging on a wall:
The photo is the content.
The matting is the padding.
The frame moulding is the border.
The wall is the viewport.
The space between two frames is the margin.
With this in mind, a good rule of thumb is to use margin when you want to space an element in relationship to other elements on the wall, and padding when you're adjusting the appearance of the element itself. Margin won't change the size of the element, but padding will make the element bigger1.
1 You can alter this behavior with the box-sizing attribute.
MARGIN vs PADDING :
Margin is used in an element to create distance between that element and other elements of page. Where padding is used to create distance between content and border of an element.
Margin is not part of an element where padding is part of element.
Please refer below image extracted from Margin Vs Padding - CSS Properties
From https://www.w3schools.com/css/css_boxmodel.asp
Explanation of the different parts:
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
Live example (play around by changing the values):
https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel
It's good to know the differences between margin and padding. Here are some differences:
Margin is outer space of an element, while padding is inner space of an element.
Margin is the space outside the border of an element, while padding is the space inside the border of it.
Margin accepts the value of auto: margin: auto, but you can't set padding to auto.
Tip: You can use the trick to make elements centered inside their parents (even vertically). See my other answer for example.
Margin can be set to any number, but padding must be non-negative.
When you style an element, padding will also be affected (e.g. background color), but not margin.
Here is some HTML that demonstrates how padding and margin affect clickability, and background filling. An object receives clicks to its padding, but clicks on an objects margin'd area go to its parent.
$(".outer").click(function(e) {
console.log("outer");
e.stopPropagation();
});
$(".inner").click(function(e) {
console.log("inner");
e.stopPropagation();
});
.outer {
padding: 10px;
background: red;
}
.inner {
margin: 10px;
padding: 10px;
background: blue;
border: solid white 1px;
}
<script src="http://code.jquery.com/jquery-latest.js"></script>
<div class="outer">
<div class="inner" style="position:relative; height:0px; width:0px">
</div>
</div>
The thing about margins is that you don't need to worry about the element's width.
Like when you give something {padding: 10px;}, you'll have to reduce the width of the element by 20px to keep the 'fit' and not disturb other elements around it.
So I generally start off by using paddings to get everything 'packed' and then use margins for minor tweaks.
Another thing to be aware of is that paddings are more consistent on different browsers and IE doesn't treat negative margins very well.
The margin clears an area around an element (outside the border), but the padding clears an area around the content (inside the border) of an element.
it means that your element does not know about its outside margins, so if you are developing dynamic web controls, I recommend that to use padding vs margin if you can.
note that some times you have to use margin.
One thing to note is when auto collapsing margins annoy you (and you are not using background colours on your elements), something it's just easier to use padding.
Advanced Margin versus Padding Explained
It is inappropriate to use padding to space content in an element; you must utilize margin on the child element instead. Older browsers such as Internet Explorer misinterpreted the box model except when it came to using margin which works perfectly in Internet Explorer 4.
There are two exceptions when using padding is appropriate to use:
It is applied to an inline element which can not contain any child elements such as an input element.
You are compensating for a highly miscellaneous browser bug which a vendor *cough* Mozilla *cough* refuses to fix and are certain (to the degree that you hold regular exchanges with W3C and WHATWG editors) that you must have a working solution and this solution will not effect the styling of anything other then the bug you are compensating for.
When you have a 100% width element with padding: 50px; you effectively get width: calc(100% + 100px);. Since margin is not added to the width it will not cause unexpected layout problems when you use margin on child elements instead of padding directly on the element.
So if you're not doing one of those two things do not add padding to the element but to it's direct child/children element(s) to ensure you're going to get the expected behavior in all browsers.
First let's look at what are the differences and what each responsibility is:
1) Margin
The CSS margin properties are used to generate space around elements.
The margin properties set the size of the white space outside the
border. With CSS, you have full control over the margins. There are
CSS properties for setting the margin for each side of an element
(top, right, bottom, and left).
2) Padding
The CSS padding properties are used to generate space around content.
The padding clears an area around the content (inside the border) of
an element. With CSS, you have full control over the padding. There
are CSS properties for setting the padding for each side of an element
(top, right, bottom, and left).
So simply Margins are space around elements, while Padding are space around content which are part of the element.
This image from codemancers shows how margin and borders get togther and how border box and content-box make it different.
Also they define each section as below:
Content - this defines the content area of the box where the actual content like text, images or maybe other elements reside.
Padding - this clears the main content from its containing box.
Border - this surrounds both content and padding.
Margin - this area defines a transparent space that separates it from other elements.
I always use this principle:
This is the box model from the inspect element feature in Firefox. It works like an onion:
Your content is in the middle.
Padding is space between your content and edge of the tag it is
inside.
The border and its specifications
The margin is the space around the tag.
So bigger margins will make more space around the box that contains your content.
Larger padding will increase the space between your content and the box of which it is inside.
Neither of them will increase or decrease the size of the box if it is set to a specific value.
Margin
Margin is usually used to create a space between the element itself and its surround.
for example I use it when I'm building a navbar to make it sticks to the edges of the screen and for no white gap.
Padding
I usually use when I've an element inside a border, <div> or something similar, and I want to decrease its size but at the time I want to keep the distance or the margin between the other elements around it.
So briefly, it's situational; it depends on what you are trying to do.
Margin is outside the box and padding is inside the box