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.
Related
I have been researching and working so hard to fix such a strange problem. I have a div that is supposed to hold some text. This div should be able to resize with that text, so that if there are two lines of text the div gets taller, etc. All that seems to work fine, but for some reason there's some sort of padding added to the top of the text and to the bottom of the text. I can't find what is causing that padding, and I really want to make the div fit the text more compactly. Here is an image of what i'm talking about:
http://i.imgur.com/ZblaLJX.png
The light blue box should be shorter in height so it fits the text more closely. Here is my CSS code for this div:
.captionCSS {
max-width:70%;
margin-top:10px;
margin-bottom:20px;
padding-left:5px;
padding-right:5px;
padding-top:0px;
padding-bottom:0;
background-color:#aef7f8;
overflow:hidden;
color:black;
}
I have messed around with all of the margins and paddings, setting them to zero and then setting them back again and nothing seems to work. The line height is inherited from another div and is 18px, while the font size is 12px, and i tried decreasing the line height but it didn't have any effect on the top and bottom padding/gap.
Also, when the text takes up two lines, it get a bit worse in that there is an extra bit of padding on the side, which i want to get rid of:
http://i.imgur.com/Ecdxdtq.png
So yeah, that's my issue. Ideally I would like a 5px gap from the edge of the div to the top of the text, so if there is anyway to do that please let me know! Thanks so much for your help!
You might try the following.
If your code looks similar to this:
<p>Some text with <span class="captionCSS">highlighted text</span>.</p>
apply the following CSS rules:
p {
background-color: gray;
padding: 5px;
}
.captionCSS {
max-width:70%;
padding: 0 5px;
background-color:#aef7f8;
display: inline-block;
line-height: 1.00;
}
If you set display: inline-block to the caption wrapper, then the line height value will have some effect.
line-height: 1.00 forces the line height to be the same size as the font-size for the element. If you set the value to be less than 1, you will get a tighter fit but you may also clip ascenders and descenders of certain characters depending on the font.
See demo at: http://jsfiddle.net/audetwebdesign/2cyaF/
Without the HTML I can't be sure, but my first guess is that the text has a parent block level element that already has styling rules. (ex: <hX> or <p>)
You can clear those styles through css by doing something like this:
h1,h2,h3,p{
padding:0;
margin:0;
}
Here are some example cases using your style: http://jsfiddle.net/JTrWL/
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
I'm stumped on a css problem. I've put up a test page here: http://georgecrawford.com/test/ for you to check.
I have a left-floated sidebar div, and a main content div which follows it (and which should wrap around it). If the content is just paragraphs, there's no problem, as the text wraps nicely around the float. However, I have some blockquotes in the content, and I'd like these to have a background-color and/or a border. The text in these is no problem, it wraps nicely around the sidebar of course. However, the blockquote itself spans the entire width of the content div, which means a border around it would run over the top of the sidebar.
How can I ensure that blockquotes in the content div are shortened horizontally to be the same width as the text lines (the 'line boxes') within them? Paragraphs have the same behaviour, but I don't need a border around my paragraphs!
Thanks for any help!
I've stumbled upon a potential fix for this problem.
If I set all blockquotes with the CSS property overflow: auto, it makes them reduce to the desired width when they'd otherwise overlap the floated sidebar. I've updated the demo at http://georgecrawford.com/test/ so you can see the difference. It's perfect in Safari/OS X, but I haven't yet tested in other browsers.
Any comments? Does this solution have any drawbacks? Many thanks again for your help.
In IE 9 the "overflow: auto" corrects blockquote underlay or overlay of a div floating to one side, however the overflow correction does not allow standard blockquote indentations on both blockquote borders.
background-color: #ccdfff;
border: 5px #dfefff solid;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
color: #003366;
line-height: 2em;
letter-spacing: 0.2em;
overflow: auto;
padding: 20px;
This leaves blockquote pushed right to the left edge of a "float: right" div. Blockquote border-right margins are ignored by IE9. Chrome has no problem displaying correct blockquote indentations.
I have tested parent-child adjustments, also display, float, and position selectors but these are not helpful. Anyone know how to correct IE blockquote margin collapse when blockquote is positioned beside a floating div?
The problem is not the blockquote - that just does what it's told, it stretches to 100% of it's parent's width. It's the parent div with the id content that does not have a float property, and thus spans across the floated div.
Can you try putting the sidebar as a child into content, and not as a sibling next to it? I think the blockquote should then adhere to the width rules.
Alternatively, you can always set the blockquote to display: inline, but that may not be what you want, as it then won't stretch to the full width anymore.
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
This page I have is super simple, this should be a breeze but I'm stumped.
I have two DIVs, one inside the other. In the first DIV, I have the margins set so that it lays at the top of the page, centered. The second DIV should lay inside the first, centered, but with a 50px margin at top. However, the 50px margin is being applied to the parent DIV and not the child. If I add a border to the parent DIV, it behaves like I expect it to, but not without.
Can anyone offer me any insight to this? Thanks in advance.
<div id="pageWrapper">
<div id="mainWrapper">
<p>foo</p>
</div>
</div>
*{
margin:0px;
padding:0px;
}
body{
background-color:#034375;
}
#pageWrapper{
width:960px;
margin:0px auto 0px auto;
background:url('i/blue-gradient.jpg') top left no-repeat;
}
#mainWrapper{
width:500px;
margin:50px auto 0 auto;
border:1px solid #000000;
background-color:#eeeeee;
}
This issue has to do with the CSS spec on rendering adjacent margins. Essentially, because there's nothing "in between" the margins of the containing div and the margins on the inner div, the larger value is used for both.
You'll see this mainly in Firefox, and although the behavior seems to follow the letter of the law, I'm not sure this particular case behaves as intended by the spec writers.
Fortunately, it's easy to fix -- put something "between" the margins. You've already noticed that putting a border on the parent div works. You can make this border transparent, and reduce the inner margin by 1px, and it will appear functionally the same as your above case. Another option is to apply one pixel of padding-top to the parent div. A third option is to use padding-top: 50px on the parent div instead of applying a top margin to the child div.
More information on collapsing margins.
You don't say which browser you're seeing this in. For me it works as expected in Firefox. However, I suspect you're seeing the issue in Internet Explorer. This is probably because the inner div doesn't have hasLayout applied - this is usually the cause of IE styling bugs. Try adding zoom:1 to the mainWrapper CSS declaration and see if that works.
You probably want to set the padding of mainWrapper instead of margin.
padding:50px 0 0 0;
Check out this description of the box model to see how margins and padding differ.