0

Consider the following code:

[example.htm]
<link rel="stylesheet" src="myStyle.css" />
<style>
    div {margin-left: 100px} /* let's assume this margin value is dynamically generated in PHP/ASP/JSP and we dont't have control over it */
</style>
<body>
    <div>foo</div>
    <div class="indent-me-more-please">bar</div> <!-- let's assume we don't have control over this part, either -->
</body>

and

[myStyle.css]
.indent-me-more-please {margin-left: * !important}

Is it possible to set the margin value (marked as *) to be always 50px greater than the value would have when it would only be set in the <style> tag or e.g. in the element attribute? In this case: 100px+50px = 150px. Something like "margin-left += 50px;" Something to call, I don't know, relative value incrementing?

Is it possible to do this in pure CSS?

1
  • You mention margin-left += 50px;, this would work with jQuery and would be considered the correct approach. Aug 27, 2013 at 16:03

3 Answers 3

0

CSS does not support that.

In your particular example, you could use padding-left to add additional space.

0

this need a different type of language like SASS http://sass-lang.com/ in sass you can add variables e.g

$margin-left: 50px;
#container{
 margin = $margin-left + 10px;
}

but to use sass you need to prepare your server for it ...

0

You could do this with jQuery

DEMO http://jsfiddle.net/kevinPHPkevin/EJzue/

$('div').css('margin-left', function (index, curValue) {
    return parseInt(curValue, 10) + 100 + 'px';
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.