Adding pixels in css

Question

is there any ways to make class add pixels to element? For example:

.block {
  height: 100px;
  width: 100px;
  background-color: red
}

.wider {
  width: calc(width + 100px);
}

<div class="block wider"></div>

So, .wider makes .block elements wider on 100px, how do I do that in the right way?

This will help developer.mozilla.org/en-US/docs/Web/CSS/…

A. Meshu
– A. Meshu

2018-12-02 16:35:43 +00:00
Commented Dec 2, 2018 at 16:35 — A. Meshu
– A. Meshu, Commented Dec 2, 2018 at 16:35

Aplet123 · Accepted Answer · 2018-12-02 20:47:23Z

5

You could attempt using CSS variables and the var() function. By defining an --width variable in your .block selector then setting the width attribute of the .wider selector to be calc(var(--width) + 100px, you can achieve a class that makes the box wider. Note that in order for this to work properly you have to add an additional --width attribute to every css selector that changes the width.

div {
    width: var(--width, 100%);
}
.block {
  height: 100px;
  --width: 100px;
  background-color: red
}
.wideblock {
  height: 100px;
  --width: 200px;
  background-color: blue
}

.wider {
  width: calc(var(--width) + 100px);
}

<p>Div with just block:</p>
<div class="block"></div>
<p>Div with block and wider:</p>
<div class="block wider"></div>
<p>Div with wideblock:</p>
<div class="wideblock"></div>
<p>Div with wideblock and wider:</p>
<div class="wideblock wider"></div>

EDIT: added width: --width to all divs at the request of Temani Afif

edited Dec 2, 2018 at 20:47

answered Dec 2, 2018 at 16:46

Aplet123

35.8k1 gold badge41 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Temani Afif Over a year ago

to make this more accurate, even the original width should use the variable

Aplet123 Over a year ago

I believe I have fixed it

Temani Afif Over a year ago

you didn't get me, the width inside the div should be defined by the variable ... making the width:200px and then defining the variable isn't flexible, you are obliged to change both. but defining the variable and using it inside the width will make you change only the variable

Aplet123 Over a year ago

Thank you for the fiddle, I believe I have fixed it now

Collectives™ on Stack Overflow

Adding pixels in css

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related