How can I override a child element's style settings?

Question

I'm working with a javascript grid plugin (jqWidget's grid). It allows me to apply a custom style to a cell when defining its columns:

{ "text": i, "width": 1, "cellclassname": "custom-column" }

This is useful to me because I am trying to reduce the width of the columns to exactly 1em.

.custom-column {
     width: 1em;
}

Unfortunately they included an extra DIV without an id or class in each cell:

<div role="gridcell" style="left: 725px; z-index: 1171; width:25px;" class="jqx-grid-cell jqx-item custom-column">
   <div style="overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; text-align: left; margin-right: 2px; margin-left: 4px; margin-top: 4px;">M</div>
</div>

In the HTML above you can see my custom class custom-column but the inserted child DIV includes padding and margins which I believe is affecting the grid cell by making it much larger than 1em (it appears closer to 3em).

Is there anything I can add in my custom-column class that would override or counter the padding and margin settings in the child?

Update : More info after change

Based on comment and the first answer I changed my custom-class to look like this:

.custom-column > div {
   width: 1em;
   margin: 0;
   padding: 0;
}

As far as I can tell this made no difference. I'm including a screenshot of Chrome's debugging tool which I hope shows enough information to help.

Answer 1

just add this CSS rule:

.custom-column > div{
    margin: 0 !important;
    padding: 0 !important;
}

If the div is not an immediate child, replace > with a blank space.

You will have to add the keyword !important after every rule because the styles are inside the div element.

Note: But adding too much of this rule is not a good practice.