I am building a page using blocks of sections:
http://jsfiddle.net/NrkTn/3/
You can see I have added margin to the section elements, however I'm unable to add both top and bottom margins, it uses whichever is the largest value.
Each section should have a top and bottom margin of 20px, making the space between them 40px, however it is showing a margin of only 20px.
Margins collapse on themselves: http://jsfiddle.net/NrkTn/4/
That is expected behavior. It will always take the largest margin and not a combination of the two. Here's an article that explains this.
Margins collaspe on themselves, so that is expected behavior. You could do what you want by changing your section CSS to use borders instead
#page section{ border-top: 20px solid white; border-bottom: 20px solid white; }
http://jsfiddle.net/SAcK8/
Another way to do what you want is to wrap your sections in divs and use padding
Related
Consider the following:
I am writing a debug class to show the position of elements on a page. I want to show the margin edge above (outside dashed line), but realise I can not use the border as this is the inside margin edge. How can I do this?
You’re probably best off setting an outline in combination with an outline-offset. outline is like border, but doesn’t take up any space in the layout and has a slightly different set of rules. Given a div with a 1px border and 10px margin, you’d add an outline like this:
div {
border: 1px solid black;
margin: 10px;
outline: 1px solid red;
outline-offset: 10px;
}
More info on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset
Unfortunately outline-offset isn’t supported in IE. If you need to support that then you’ll have to go down the psuedoelement route as per the other answers.
The box model prevents this.
As you in your original post the margin of a box is not included in it's content size. Without changing your margin to padding this could only be done with pseudo elements.
http://jsfiddle.net/Fcwkw/1/
Since you mentioned it's a class you can simply get a div's margin with some Javascript and set the pseudo padding to the margin.
That's not how border's work, and your image is a perfect example of that. You could create a border with a second element or with the use of :after for example...
You can use :before/:after with position:absolute, border-left/right and height:100%
In CSS code,
we use
#testing{
margin: 0;
padding: 0;
}
i use RECESS to code qualify my css file
it suggest me to use padding first and margin after
#testing{
padding: 0;
margin: 0;
}
My question is, does the order of padding and margin important in css quality?
And what's the different between padding first and margin first?
EDIT
just wondering why it suggest the order for me
My question is, does the order of padding and margin important in css quality?
I consider the reason is "coding style".
In order to readability, consistency, manage, picky...
You can also order by a-z, type, css3 last...etc.
And what's the different between padding first and margin first?
Looks.
Example:
WordPress CSS Coding Standards
Google HTML/CSS Style Guide
Margin is applied to the outside of you element hence effecting how far your element is away from other elements.
Padding is applied to the inside of your element hence effecting how far your element's content is away from the border.
Also, using margin will not affect your element's dimensions whereas padding will make your elements dimensions (set height + padding) so for example if you have a 100x100px div with a 5px padding, your div will actually be 105x105px
The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content from top to bottom.
i.e. immediately on top content it takes padding value, border and finally on top of everything margin would come.
Margin,padding and border values should be deducted from the width before assigning the width value in css. For example width: 100px, padding: 10px, margin: 10px, border: 5px means width of the total container is 150px(100px+20px (left and right padding each 10px) + 10px (left and right border 5px each) + 20px (left and right margin)).
order of giving padding and margin values doesn't make any difference. we can write in any order in css.
I am using the following code to style blockquotes on my site:
blockquote {
border-left: 7px solid #b83131;
background: #ebebeb;
margin: 1.5em 25px;
padding: 1px 10px;
quotes:"\201C""\201D""\2018""\2019";
}
The line that begins with padding: controls the padding on the top and bottom of the block quote. For some reason, it doesn't work as it should. Instead of padding by only 1px, it is always way more than that. It's as if, no matter what I set as the padding, it is always at least a few pixels high.
For example, with the padding set as you see in the code above, this is the result:
As you can see, the padding on the top and bottom is way more than 1px. Why is that? I want the padding to be a true 1px, but it seems that no matter how I alter the code, it's either no padding at all, or way more than 1px.
Any help here?
If you take a look at the following jsfiddle, you will see that with only the code you posted, one cannot reproduce the problem.
I for myself believe that there is a <p> tag inside your blockquote.
Just remove it by setting its margin to 0.
p {
margin: 0;
}
Try adjusting the line height of the text within the blockquote. It might be that the 1px top and bottom padding is enough to for the text to kick down to the next full line making it looks like it's over padded.
I had the a similar problem: I was trying to minimize the space above the block quotation, so I set
BLOCKQUOTE {margin-top: 0}
This seemed to work sometimes, but not always.
Here's what I discovered: When it didn't work, there was an unclosed paragraph <P> tag somewhere above the quotation. The opening <BLOCKQUOTE> tag effectively closes that paragraph, so the unwanted whitespace was coming, not from the top margin of the quotation, but from the bottom margin of the paragraph above it. This fixed it:
BLOCKQUOTE {margin-top: 0}
P {margin-bottom: 0}
Of course, if you don't want every paragraph to have zero bottom margin, you can define a special class.
I have a paragraph on a web page with 20 pixel margins on all 4 sides. I want to alter just the top and bottom paddings with a single property (so padding-top:0;padding-bottom:0; will not do).
What I have tried is demonstrated here.
http://jsfiddle.net/nFCru/1/
In this Fiddle, I tried to use padding: 30px inherit; to alter just the top and bottom paddings of a paragraph. However, this property-value pair sets the left and right paddings to 0 in addition to altering the top and bottom paddings.
p {
border: 1px solid #000;
padding: 20px;
}
/*
* Here's my failed attempt at only altering the top
* and bottom padding values. The left and right padding
* values are changing even if I use inherit.
*/
p {
padding: 30px inherit;
}
Can I alter only the top and bottom paddings with one property?
No, you can't. inherit means the element inherits the padding from its parent. That is, the body (or whatever element the p sits in), not the "original" p in the stylesheet. To leave the left and right padding intact, all you can do is use the two properties as you described.
In short, no.
The only allowable attributes for padding are width (fixed) or percentage, or inherit (from the parent element). There is no way to inherit values already set.
To set the individual padding values you must use the individual properties.
See http://www.w3.org/TR/CSS2/box.html#padding-properties
Until now you couldn't. But even though this is a very old question I thought I'd update it with a new answer.
With the CSS Logical Properties and Values draft you will be able to do this in the future.
It allows you to specify the start and end of a block or inline padding which is dependent on writing mode and direction instead of simple left-to-right based on the screen in front of you.
If you wanted to specify a 10px padding on the top and bottom of an element you could achieve this with the following for example:
.element {
padding-block: 10px;
}
Although not yet supported by any browsers you could already use this in your projects by using PostCSS with the PostCss Preset-Env plugin.
If you only wanted to change the top and bottom, just use the shorthand padding:30px 0px 30px; would be top, right, bottom.
Inherit basically inherits only the parent element's style but in your case you can't use inherit but you can do the following for two "p" elements using class.
p{
border: 1px solid #000;
padding: 20px;
}
p.another{
padding: 30px 20px;
}
<p>A Paragraph with 20px top, right, bottom, left</p>
<p class="another">Another Paragraph with 30px top, 20px right, 30px bottom, 20px left</p>
i totally understand the box model. this question is more about trying to pin down a semantic methodology regarding when to use margins and when to use padding.
here is a typical example,
first, in plain English:
situation: we have a container div, inside of which there is a paragraph element.
goal: to have a 12px space between the inside of the div and the outside of the paragraph.
option a) apply 12px of padding to the container div
option b) apply 12px margins to the paragraph element
or, if you prefer, HTML:
<div id="container">
<p>Hello World!</p>
</div>
and, CSS:
option a)
div#container {padding: 12px;}
option b)
p {margin: 12px;}
Cheers!
Jon
Paddings and margins gives the same effect, Except in the following cases (I might miss some):
You have some kind of background properties. Margins won't get them.
You have a border
You use TD (no margins)
Two nested items, The margins are collapsed together, where paddings not.
(need to check this one) They probably affect the width and height of the element differently. (If some one knows better, pls edit this).
Personally, I prefer option A. Why? Say now I have to add other HTML elements into the div and I want the padding to be maintained, I would not have to add other rules to my CSS files to get it working.
This is a bug in css,
here are examples:
http://creexe.zxq.net/div-issue-padding.html = padding issue
http://creexe.zxq.net/div-issue-margin.html = margin issue
the red and green div tags in the examples were created by the css property TOP,but it has its own disadvantages athat TOP,BOTTOM etc works only when the position of the div tag is Absolute and relative, but not static
It depends on what you're trying to accomplish visually. Would container have other child elements which might hang over into the gutter on either side of the paragraph? If so, a margin makes more sense. But if container should have a 12-pixel gutter for all elements, period, it makes the most sense to use the padding to avoid having to apply margins to multiple element sets.
Generally speaking you always want paragraphs to have vertical margins to ensure consistent paragraph leading.
Personally, I'd go with option a of #container {padding: 12px;} because it makes amply clear that all child elements must stay 12px away from the border of this div.
If I want other elements to stay more than 12px away from the #container's border, then I apply as much more margin to that element.
Cheers!
Vertical padding on the division - because if I decided I wanted a different amount of vertical space in between the multiple paragraphs I'd use bottom margins, and the top/bottom padding of the enclosing division pretty much will always stay intact assuming you just have staticly positioned elements inside.
The difference is where the border sits.
The border sits SMACK DAB in the middle of the margins and padding. If you specify margins, that is white space OUTSIDE the border.
If you specify padding, that is white space INSIDE the border (pushes the border further out from the element)
Can't show you here due to css stripping, but try this out:
<body style="background-color: #aaa">
<p style="background-color: #aee; margin: 40px; padding: 40px; border: solid 2px black;">
i have margins, padding and a border.
</p>
<p style="background-color: #aee; margin: 40px; padding: 0; border: solid 2px black;">
i have margins, and a border.
</p>
<p style="background-color: #aee; margin: 0; padding: 40px; border: solid 2px black;">
i have padding and a border.
</p>
</body>
other stuff!
padding brings in background color of the element, margins are basically transparent
some elements ( like td ) seem to ignore margins, while they respond to changes in padding