CSS + adding to the height and width of inherited divs

Question

To work, I need to go through and create a ton of html pages, and I found that many of the custom classes I created can be reused if I can figure out a way to add attributes such as height and width.

Example:

.custom_class{font-size:1em;height:100px;width:80px;} 

Lets say that I have this class, which I use in many divs on my pages, but I come across a template that I create, where the width should be a little wider. We will say that I need a width of 95px. Is there a way to add + 15px to the current width and don’t need to go in and find out the current width of 80 pixels, and then either make a new class or the right inline css to compensate for this?

 .custom_class_differnt{font-size:1em;height:100px;width:95px;} 

I do not want to completely recreate this. I was hoping there was a way to just do, maybe style = "width: + 15px;" or something. (a little in the css line is fine, nothing more, though)

thanks

Answer 1

With jQuery you can add the required width:

 $(".yourSelector").css("width","+=15px") 

This will add 15px to the current width.

Answer 2

Perhaps an acceptable solution would be to provide additional classes with an alternative width (or other styles).

For instance:

 .custom_class { font-size: 1em; height: 100px; width: 80px; } .custom_class.wide { width: 95px; } 

And then in areas where you need width to be wider, you simply create an element, for example <div class="custom_class wide"> .

Answer 3

The workaround I'm using is to add margin-left and margin-right. Therefore, if I wanted a width of + 15px, I would add margin-right: 15px