CODEWITHSUNDEEP
cssangular
angela philstine
angela philstine

Reputation: 59

Margin in angular global styles are not enforced

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

Upvotes: 2

Views: 250

Answers (2)

EyeGee
EyeGee

Reputation: 1

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."

Upvotes: 0

Lahiru Mirihagoda
Lahiru Mirihagoda

Reputation: 1163

Try using

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

this happens because that style is getting overridden by another

Upvotes: 1

Related Questions