I have some html as below- nothing fancy- just a div and a span
<div id="container">Some text to affect the width</div>
<span>A</span>
I'm using eric meyer's css reset. One of the things that he is doing is setting the line-height of the body to 1. Also, he is setting the font: inherit; for every element.
Then, I have a few other styles for the html elements above as follows:
body{background:#912FFF}
#container{background-color:#EDC1C1; width:150px;}
span{background-color:#35D9C4;}
Fiddle: http://jsfiddle.net/probosckie/5pb4794u/
The problem is that my span is overlapping with the div. If I zoom into the page it is all the more evident.
Im guessing is that line-height set to 1 and the font set to inherit is messing this up. Can someone please confirm on this??
Set line-height:normal; in your body element. Setting the line-height to a lower value than its text height will cause overlapping.
Unfortunatly inline element's padding and margins aren't designed for exact pixel layouts, but for the flow of text. In this case You should use a div instead of the span element or put the span inside a div.
Flexbox can be used to vertically align elements. But when a vertically-aligned element later grows, it can escape the bounds of its flexbox container. This happens even when overflow:auto is used on the element.
Here's a demo with some expected and actual results.
Using the demo:
Open the demo
Enter lots of text in the gray box
Expected result:
The paragraph becomes taller as text is entered. When the paragraph is as tall as its flexbox container, it stops growing and a vertical scrollbar is shown.
Actual result:
The paragraph becomes taller as text is entered, but never stops growing. It ultimately escapes the bounds of its flexbox container. A scrollbar is never shown.
Other notes:
It's tempting to put overflow:auto on the container instead, but that doesn't work as expected. Try it out. Enter lots of text and then scroll up. Notice that the top padding is gone and lines of text are missing.
You need to do the following:
Add "max-height: 100%" on the <p> element to keep it from growing indefinitely.
If you want to keep your padding on the <p>, you also need to set box-sizing: border-box to get its padding included in that max-height.
(Technically box-sizing:padding-box is what you want, but Chrome doesn't support that; so, border-box will do, because it's the same as the padding-box since there's no border.)
Here's your JS Fiddle with this fix
In your css you need to give height
p {
padding: 20px;
width: 100%;
background-color: #ccc;
outline: none;
height: 60px;
}
JS Fiddle
Please see example at
http://jsfiddle.net/cne94hw4/
.a{
width: 100%;
background-color: #eee;
margin-left: 200px;
}
I was expecting "width 100%" will mean 100% of the windows, but clearly it's not when I add a margin to it. I found this is difficult to understand.
What's the exact relationship of the box and the margin? It's there any written rule for this?
Your question is about the CSS Box model, which is described in detail at the CSS specification: http://www.w3.org/TR/CSS2/box.html
In brief, the width defines the width of the content box. If you add padding, borders
and margins, then the overall width of the block box is the width of the content box plus
any widths due to padding, borders and margins.
As for the height, padding and border widths are added to the overall heigth of the
block. Margins, though, can collapse with the margins of adjacent blocks, which is
another topic to look at (see: collapsing margins).
Another concept is the block formatting context, which comes into play if you
deal with elements that may be floated or positioned.
In your example, the overall width of the a element is 100% plus 200px due to the
left margin.
Finally, you can have some control over how the width is computed by using the box-sizing property.
width: 100%' does mean100%` of the document your example, but you also set a margin, which is what's limiting the width of the element. See what happens when you remove it.
try the following
.class{
width:100%;
padding-left:200px;
box-sizing:border-box;
}
margin adds extra space out of the box.
I'm trying to get a div with css property display:table-cell; vertical-align:middle to behave as it "should". My expectation is that text inside these divs would be vertically aligned regardless of whether it's wrapped in an anchor or not.
Here's a jsfiddle: http://jsfiddle.net/smittles/GsKg6/
What am I doing wrong that prevents the vertical-align property from rendering the text out centered vertically, in the same way the header does in this example.
There is no need to use display: table-cell or even float anywere in this example.
To vertically center the text in the header, set the line-height of the <h2> to match the height of #h2wrap. Or remove height from #h2wrap and increase its top and bottom padding instead.
To vertically center the images, labels and the buttons within the <a> tags, set their display to inline-block and add a vertical-align: middle. You will have to explicitly set their widths and also eliminate the extra spaces caused by inline-block, but I believe this would be the easiest solution.
If you have multiple lines of text line-height will not work.
See this for the ways of applying vertical align. The line-height won't work with text that needs to wrap (which I believe you have). You'll have to use display: table-cell.
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