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.
Related
I was playing around with the line-height property from the following site:
http://www.w3schools.com/css/tryit.asp?filename=trycss_float6
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}
I tried to understand about line-height and I read this:
On block level elements, the line-height CSS property specifies the
minimal height of line boxes within the element.
From:
https://developer.mozilla.org/en-US/docs/CSS/line-height#Examples
But interestingly in the example above from w3schools, changing the line-height property will increase the size of the containing div element which seems to be contradicting with the statement made in mozilla site. Hence I would appreciate greatly if any can offer clarification what actually a line-height does.
Thanks
line-height is actually given when we want to align the block elements in between along y-axis.
Forexample, i have a singled line text in w3schools and para height is 20px. The paragraph will be written in its own default way but if i use line-height equals the height of the paragraph then text in say W3schools will be aligned in the middle along y-axis. While if you want to horizontally align (x-axis align) your text then text-align:center is used for this purpose.
Remember, line-height do not totally depend on the height of its own element height. But it changes as follows.
If you have a single line text, height is 20px then give line-height: 20px to vertically align the text or vertically middle of text.
If you have a two line of text, height is 20px then give the line-height:10px and with the small padding-top to vertically align the text.
I hope this will lift you up. And i think you will not need to browse google more. If more you want explanation then i will give you jfiddle code. :)
It's not contradictory. Setting the line-height property on a div will apply the same line-height property to all inline children. So in your example, by setting the line-height property on the div, any child elements that are display: inline will have the new line-height applied to them. When the height of those child elements is increased, the height of the parent div increases to be able to contain the child elements.
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
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
The following example is identical in almost all browsers including IE6:
http://jsbin.com/adica3
#one {border : 1px solid red;padding:20px}
#two {border : 1px solid yellow}
p {border: 1px solid blue;}
.marg {margin: 0;padding: 0}
.padd {margin: 20px}
</style>
</head>
<body>
<div id="one">
<p class="marg">Padding to div</p>
</div>
<div id="two">
<p class="padd">margin tp P</p>
</div>
But when I give width to div then second div becomes shorter then first div.
How we should decide which is appropriate?
What browser compatibility issues should I know about?
Margins are on the exterior, paddings on the interior relative to the border. So obviously if you have something like a background image and text, and you want the text to have space between the edge of the bg image you'd use padding. Same thing with borders.
If you wanted space on the outside in addition to space between the border/bg images then you'd use margins.
If you're not doing anything remotely design-complex then it shouldn't really matter, but one thing you should look out for is margin collapsing, if you have elements coming before/after with vertical margins and you specify margins the values will collapse, sometimes you'd use padding to navigate around that.
If you give #one and #two a width of 200px, #one will take up 240 pixels without counting the horizontal borders, since it has 20px of padding horizontally.
IE5's rendering engine and quirks mode IE6/IE7 incorrectly draw the correct amount of space if you specify horizontal padding and a width, width:100px; padding:20px; would force the box to actually take up 100 pixels of width, instead of actually being 140 pixels as it should correctly be.
Another bug to note is the double margin bug; if you have a floated element and a margin that's in the same exact direction as the float, eg float:left;margin-left:100px; it accidentally doubles up. This is fixed by adding display:inline; which forces it to just have 100px instead of 200px to the left.
I notice that you ask a lot of questions which would be answered by simply reading a decent front end book - have you considered reading:
http://www.amazon.com/CSS-Mastery-Advanced-Standards-Solutions/dp/1430223979/ref=sr_1_3?ie=UTF8&s=books&qid=1263529151&sr=8-3
http://www.amazon.com/Build-Your-Website-Right-Using/dp/0980455278/ref=sr_1_13?ie=UTF8&s=books&qid=1263529151&sr=8-13
http://www.amazon.com/Beginning-CSS-Web-Development-Professional/dp/1590596897/ref=sr_1_12?ie=UTF8&s=books&qid=1263529151&sr=8-12
Those would probably answer a lot of your questions...
I'd make the decision based on what's going to be inside your tags.
For example, is the <p> the only thing that's going to appear inside your div? If so, then it probably doesn't matter.
If there are other elements that will be inside the div, do you want padding around them or not?
As for the modified width, that will probably be due to the different boxing models between browsers.
i think the easy way is thinking the border of the element.
margin spaces outside border, while padding inside.
Of course, there are some browser related issue made them difference in some way, but i suggest stay with my suggestion and find work around on those special browsers.
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