Negative Values in CSS
- Started
- Last post
- 17 Responses
- jpaw61
Ok so this is probably a stupid question but:
Is it ok to have a negative value for a margin in CSS? Is it just a stupid beginner thing to do? I find myself having to do this often and am afraid I am setting myself up for failure.
The question isn't so much related to my design but overall, is this a bad practice?
- neverblink0
what is the situation you find you have to need it for?
- raf0
margin - yes, padding - no
How different browsers will render it is another story
- but browser issues should be limited to IE6raf
- How come? (with the padding)Andrew_D
- "Unlike margin properties, values for padding values cannot be negative" http://www.w3.org/TR…raf
- Gotcha, I've never done it, I just didn't know it was frowned upon.Andrew_D
- padding effects the contents of a div whereas marhin effects the positioning. this is why neg margins only.airey
- Andrew_D0
I do it, I've seen other people's code using it. I don't think it is, but I don't consider myself a developer.
- jpaw610
For example, I am placing a flash element inside my container, and it's not lining up right. So I set the left margin to -10px and it centers fine then. I'm just wondering if I am hurting myself since I can't recall one tutorial or article that had negative margins.
- in respnse to neverblink's post above.jpaw61
- shouldn't be a problem..neverblink
- neverblink0
it's fine, but there is a reason why it's not lining up correctly.. take away that reason and you should have a more -proper- way of dealing with it. Maybe the flashmovie has a margin on it? Maybe the container has a padding?
- heavyt0
it isnt really a problem - but there is a great chance that if you are needing to use them a lot, you are doing it wrong.
- exactlyneverblink
- Cool. It's not happening a lot, probably once every project or so.jpaw61
- ETM0
I use negative margins in some cases where I want overlapping elements. But just to simply line something up, I agree with neverblink that you should find the reason that its not lining up in the first place.
Don't forget about inherited values as well as elements default values in browser.Have you tried the CSS Reset?
http://meyerweb.com/eric/thought…- I was unaware of this. Nice stuff here.. thank you.jpaw61
- jpaw610
Maybe I will just go back to using tables.
- NoFavorite0
It's okay for margins, although you should try and avoid it. There's usually a solution that doesn't require them.
- acescence0
negative margins is really thinking outside the box
- ok, that was a bad jokeacescence
- bad but i sniggered. and then a piece of me died inside.airey
- that is an excellent joke. I feel connected to you because of it. Screw everyone else, I'd buy you a beer for that joke.mikotondria3
- lukus_W0
I think negative values for margins are totally fine, and there are some situations which require it.. the same goes for positioning.
- raf0
Again, the only reason not to use them might be browser inconsistencies. Just test it properly in target browsers.
Negative values have their common use, ie. in background positioning.
- 3030
You can get final effect similar to negative margin if you use negative values for positioning:
.parent {
position: relative;
}.negative {
top: -10px;
left: -10px;
/* other styling goes here */
}<div class="parent">
<div class="negative"></div>
</div>
- Nairn0
I hear, if you go high enough right, you end up back left again.
Try margin-right:200000000000000px;
- juhls0
I try not to, but sometimes it's useful.
- thoughtandtheory0
I like using positioning in these cases. It's a bit more precise.
- acrossthesea0
Make sure you have some sort of reset css which should help out with a lot of these situations.