Is it possible to add a box shadow without adding a "margin"? Basically, I have a wrapper div, and I don't want the box-shadow to create a margin.
Yes, it is possible, and in fact, adding a box-shadow does not implicitly add a margin.
A simple example shows this to be true: the spacing between the spans is caused by the space in the source; that is not a margin, and no margin is added.
Ok, I figured out that I didn't do a CSS reset and that fixed it.
Related
i'm having a rather unique problem with CSS and DIV with/without borders.
Now, when i use the DIV without any borders, there is a kind of automatic padding! when i add a border, the padding disappears.
Even when i use "margin:0;padding:0" it still doesn't clear off the padding.
does anyone have any ideas why it's behaving like this? As a result, i had to use a border with the same color as the page background, but now i have same problem with a set of 3 DIV that should be right next to each other and CANNOT have any borders at all.
HELP!
See this image:
http://i56.tinypic.com/311vw51.png
You will note that part of the border of image 2 and 3 (left side) are cut off, not entirely visible. I'm using the transform:rotate(xdeg); CSS rule.
Is there anything that can be done about this apart from adding more padding or what not? I tried changing the z-index but that didn't seem to help? Am I missing something?
Do you have an overflow: hidden on the parent element? It's likely that your rotated elements are overstepping the boundaries of the ancestor elements, of which one has an overflow: hidden set on it. Removing that should stop the elements from being clipped.
Can you please post your markup and part of the CSS?
By the way, looking at the picture you posted, it could be that one of the parent elements has the overflow property set to hidden.
What I’m trying to achieve is a top border that matches up (i.e. overlaps) exactly with the bottom border of an element above.
Any ideas on how to achieve this?
Negative padding is not allowed, nor in the CSS spec as far as I'm aware. Padding is for adjustments within the box model, margin is for adjustments outside.
You may be able to achieve the desired affect with a negative margin
margin-top:-20px;
for instance.
But it would help to see your code to offer more assistance.
Yup, but not with padding. Use a negative top margin instead.
See http://jsfiddle.net/TD9x7/
either you use negative margins or absolute positioning. negative values are not allowed
Can I use negative padding so that together with a border they appear outside the container
No, but you can use negative margin. Anyway, I'd set only left and right border of inner element.
Your problem can easily be solved without messing with the margin/padding, just remove the bottom border, which will make it look as if it was overlapping.
border-bottom:none;
http://jsfiddle.net/E9XHA/
If your borders are side by side just remove the right/left border... etc
Has anyone else ever ran across this? This is the second time it's come up in as many years and I am not sure the "correct" way to solve it.
I can achieve the same results with padding in the child, but it just makes no sense.
Testing in Safari/FF.
I usually solve this problem by setting display: inline-block on outer div. It'll make outer div to occupy exactly the space necessary to display its content.
An example, showing the difference.
It is called margin-collapse. When a top and bottom margin are directly touching (not separated by anything, like a border or line break) the margins collapse into a single margin. This is not a bug. Read more about it here at SitePoint.
Sounds like margin collapsing which is natural behaviour. This is a good read:
http://www.andybudd.com/archives/2003/11/no_margin_for_error/
There are number of ways to get round margin collapsing issues. One way is to add a border
or 1px of padding around the elements so that the borders are no longer touching and so no
longer collapse.
Another way to stop margins collapsing is to change the position property of the
element.The CSS2 Specs explain that margins of absolutely and relatively positioned boxes
don't collapse. Also if you float a box it's margins no longer collapse. It's not always
appropriate to change the position properties of an element but in some situations if
you're having problems with unwanted margin collapsing, this may be an option.
I am trying to just create a basic layout, but i am having trouble to get it to auto-adjust the height.
Something is wrong with the DIV-container since it's not adding the padding correctly to the top and bottom elements. It should be the size of the highest block, right now its the menu block.
Any ideas?
Website
in the container that holds your divs (the one whose height is not adjusting), use a css clear fix. Your container div will adjust once you use this method.
Add overflow: hidden; to the CSS for that particular <div>.
Inspect your HTML by using Google Chrome or Firefox with the firebug addon. Is so easy to see where and where not there is correct padding, margins etc... Additional ye see all css for a selected element as well...
Btw. When you are using padding, are you sure the rows above and below are cleared ?
Tried using margins instead?