My bottom margin styling is being ignored for some reason

I have a ‘Note’ on my page and my bottom-margin styling is being ignored. I have the following style at the top of my style sheet which is intended to style each

element and that works fine.

.minor .minorContent p {
margin-left: 13.1111111%;
margin-right: 5.555555%;
margin-bottom: 10px;
}

However, I when I try to override this style with the ‘Note’ style the bottom-margin is ignored. This the style used:

.note {
color: black;
border: 2px solid white;
background-color: rgb(255,255,175);
padding: 20px;
margin-top: 25px;
margin-bottom: 50px;
}

Here is a link to the page in question. The ‘Note’ has a yellow background.

http://www.wwbydesign.com/minor/power-tools/shelix-cutterhead-install.html

This is not an earth-shattering problem, but I would like to understand why the bottom-margin is being ignored.

Thank you for any help provided,
Phillip

It’s to do with “Specificity”.
The first rule has a more specific selector than the second one.
It consists of two class selectors and one element selector, that far outweighs the single class selector for the second rule.
You would need a selector of equal or greater than weight to override the first one.

1 Like

@SamA74

Thank you, sir! I am aware of ‘Specificity’, but did not realize that was the issue in this case. Now that you have explained this so clearly it makes perfect sense.

You have taught me an invaluable less. I am very grateful for your help.

@SamA74

I just made the necessary style change and Voila!, my bottom margin is now working as intended.

Thanks again for taking your time to help me.

I checked the site link on an iPad Mini 2 and noticed the title was chopped off at the top in portrait mode but ok in landscape mode.

@John_Betong

I checked out the site and everything appeared as it should. Then it dawned on me that you were looking at the linked page I provided above and you’re absolutely right. Argh!! LOL! Just when I think I’m on a roll …

I appreciate the feedback on this. I will take a look and try to figure out the problem. The home page is fine:

http://www.wwbydesign.com/home.html

Thanks again for the info.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.