mkdocs and markdown: base.css overwrites custom css

Question

i'am new to mkdocs, here is what i'm trying to do: add a caption to images and use a css style to use a shorter margin-bottom i managed to install a python-makdown extension "captions", so if i use

![](../img/some.png)
:   my sub caption

i'll get

<figure><img ...><figcaption>...

in html. Unfornutately the spacing (css: margin) is to big so i included a css file to remove the default values. Inspection in my browser now shows me, that base.css overwrites my style, so margin remains at default. How can i overwrite base.css styles with my own styles?

As i wrote in my comment, !important guarantees overwriting:

figure img {margin-bottom: 0px !important;}

But I don't understand why...

Answer 1

If you use your browser's developer tools to inspect the img element...

You can see that the img is defined with a rule for div.col-md-9 img. that is, any img tags under the div with a class of col-md-9.

We can see that (as explained in CSS Precedence) the original rule uses one class attribute and two element names for a specificity of 0012. You need something of equal or higher specificity. But figure img only gives you 0002, which is lower.

To override that, you need at least the same level of specificity:

I'm sure various other permutations would give a working result as well. But we have a working solution, so why keep going. And thanks to the "inspect" tool, it was pretty quick and easy to resolve.