CODEWITHSUNDEEP
htmlcss
kravits88
kravits88

Reputation: 13049

Add pixels to existing value

Is there a way to add 5 pixels to an items padding without losing its inherited padding.

li{padding: 10px;}

and ideally something like this would give me 15px padding on the li:

<li style="padding: +5px;">

Upvotes: 0

Views: 3235

Answers (3)

Azketta
Azketta

Reputation: 79

You would actually just change the overall value for that padding, like:

<li style="padding: 15px">

Note: This would only change the style for this one

  • If you are going to use this li a lot, instead of typing that line each time, you could do a class (if you are using css), for example

     .xtrapad { padding: 15px; }

    Then on each li you want to do, in the html file, you would put:

    <li class="xtrapad">

    In this specific situation, it would not save a lot of time in comparison, however, you could use the xtrapad class on more than just the li, such as <p class="xtrapad">

    Also, multiple classes can be made, so if you had other classes made, i.e. nomargins, strong, etc you could do: <li class="xtrapad marginless strong"> and it would use everything in those classes.

    Upvotes: 0

    • Tushar
    Tushar

    Reputation: 4418

    You can do that using :before and :after, however this will be only from two sides "top and bottom" or "left and right".

    I'll suggest you to add a div inside li and give padding additional padding to it.

    Upvotes: 1

    Chankey Pathak
    Chankey Pathak

    Reputation: 21676

    If you can use jQuery then for example, to add 5px to li:

    $('li').css("padding", "+=5")

    http://api.jquery.com/css/#css-properties

    As of jQuery 1.6, .css() accepts relative values similar to .animate(). Relative values are a string starting with += or -= to increment or decrement the current value. For example, if an element's padding-left was 10px, .css( "padding-left", "+=15" ) would result in a total padding-left of 25px.

    Upvotes: 2

    Related Questions