Margin in angular global styles are not enforced

user_14515211 0
Viewed 98

I created a global CSS file. It is working perfectly, except that I am unable to set margins.

For Example CSS:

.update_date {
    font-size: small;
    text-align: right;
    margin: 0;
}

This is a CSS style for class update_date. When I use it, except margin, everything is applied. It's the same case with every other class. None of these classes are overridden in any other place.

Can someone provide a workaround on how I can set margins globally.

Environment:
Angular 10/11

angular css
2 Answers

Try using

   .update_date {
        font-size: small;
        text-align: right;
        margin: 0 !important;
    }

this happens because that style is getting overridden by another

user_74700450

You should avoid "!important" if you can. It can cause unintended styling issues later down the line - see below.

My suggestion: In your browser, use your "Inspect Element" (Ctrl + Shift + I) tool to figure out where in the DOM Tree your styling is coming up and what is overriding it. This will help identify if !Important is truly the only solution you can use.

Inspect Element Tool Picture Example

Hard to say with your code snippet what is actually happening and being this post is 1.5 years old, you may already know this info. But I didn't see any other responses, so just wanted to raise awareness to the "!important" property.

More about !Important

From W3 Schools (I am sure you can find this elsewhere as well): https://www.w3schools.com/css/css_important.asp

"Tip: It is good to know about the !important rule, you might see it in some CSS source code. However, do not use it unless you absolutely have to."

user_108530100
Related