Menu
I have this code which was working fine but commonly (not for this code specifically) my senior developer told me to avoid minus values on margin.
#speech-bubble {
margin:100px;
width: 120px;
height: 80px;
background: blue;
position: absolute;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#speech-bubble:before {
content:"";
position: absolute;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid blue;
border-bottom: 13px solid transparent;
margin: 13px 0 0 -25px;
}<body>
<div id="speech-bubble">
</div>
</body>Why do I need to avoid negative values on margin?
If I removed content:"" my code not working but I think it's an unnecessary line.
What does this do? After I remove it from my code, things work?
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
442
If we apply margin with 2 negative values, then the first value is for the top and bottom and the second value is for left and right applied respectively. If we apply margin with only a single negative value, then applied it for all four sides equally.
Imagine that margin is the foundations of your element on which it sits. They are typically the same size as it, but can be made larger or smaller on any or all of the four edges. Your CSS tells the browser to position the top of your element the margin at a point 50% of the way down the page.
Set the right margin for a <p> element to 50% of the width of the container: p.ex1 { margin-right: 50%;
The margin-right property sets the right margin of an element. Note: Negative values are allowed.
1.my question is Why need to avoid negative values on margin?
Negative margins are counter-intuitive with the normal concept of margins being the space around an element. Negative margins are technically fine, but makes the code harder to read and maintain. If there is an alternate way that's more straight forward its better to use it.
2.if I removed content:"" my code not working but I think its unnecessary line..
:before and :after creates pseudo-elements in HTML if a content is defined. If you don't provide a content there is probably nothing to show in the pseudo-element.
Check the specs here the default value for content is none which should not generate a pseudo-element.
You will have to use '' a null string if you dont need any content in the element.
- what does -moz-border-radius: 10px; -webkit-border-radius: 10px; after i removed this from my code it working fine :)
border-radius can be googled to get the meaning, -moz, -webkit, -ms, -o etc are browser prefixes for experimental rules that browsers introduce before a specification is ratified. -moz-border-radius is so like a pre-release version on border-radius that older versions of gecko based browsers supported. Most recent browsers support these rules without any browser prefix.
88
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
