Adjust CSS property values using positive and negative numbers

My HTML content looks like this:

https://i.sstatic.net/qEuVw.png

I have a padding of 70. I attempted to decrease the padding by adding another CSS rule like this:

padding-top: -20px !important

What I'm trying to achieve is to combine the existing property value of 70px with the additional rule of -20px, resulting in 50px.

I managed to accomplish this by using padding-top: 50px !important, but I still want to perform these mathematical calculations directly in the CSS as mentioned above. Can you please assist?

Note: The current value is stored in a separate CSS rule, while the added one is in its own rule.

html css

Answer №1

Regrettably, cross-class calculations are not supported in CSS

If you need to perform mathematical operations, consider using the calc() function

This feature allows for expressions like: padding-top: calc(10em - 60px)

Although there may be limitations when it comes to background-position, calc is compatible with IE9 and most other browsers except Opera Mini

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Identifying dates in pandas index and header: A comprehensive guide

After utilizing the HTML parser to extract a table from a particular website, the current output looks similar to the following: Current Output: 1 Sep 2 Sep 3 Sep 4 Sep 00:00 11 47 54 10 ...

python html python-3.x pandas html-parsing

New alternative for form-control-feedback in Bootstrap 4

The form-control-feedback class doesn't appear to be included in Bootstrap 4. What is the most effective way to achieve the desired outcome (an icon inside the textbox) using Bootstrap 4? <head> <link rel="stylesheet" href="https://max ...

css twitter-bootstrap bootstrap-4

Pass data from a child controller to its parent using $emit

My goal is to pass values from dropdown lists and input fields in the FirstController to the MainController, and values from datepickers in the SecondController to the MainController. I have been attempting to use $emit and $on but without success. It&apos ...

javascript html angularjs emit

Creating Radial Fades with CSS3

Seeking guidance on creating a background similar to the one shown here using just CSS. I believe it can be done, but I struggle with CSS3. The goal is for the background to be compatible with all modern browsers, not overly concerned about support for br ...

css

Stop access to geojson files through targeted media queries

Using a vue.js app, I have the ability to choose locations using either a map or an input field. However, for mobile users, I want to exclude the map and only serve the search engine. The issue is that it's not very user-friendly on mobile devices be ...

css vue.js

Reactjs error: Invariant Violation - Two different nodes with the matching `data-reactid` of .0.5

I recently encountered a problem while working with Reactjs and the "contentEditable" or "edit" mode of html5. <div contenteditable="true"> <p data-reactid=".0.5">Reactjs</p> </div> Whenever I press Enter or Shift Enter to create ...

javascript html reactjs

CSS - my expectations of reduced content were not met

I'm attempting to create a responsive content box that shrinks properly when the browser size is reduced. https://i.sstatic.net/wQD8j.png However, I am facing an issue where the content (yellow) does not shrink and instead overflows horizontally whe ...

css flexbox

Is there a way to make a div stay fixed at the bottom of the screen while allowing the middle content to scroll?

I am seeking a way to create a sticky footer that remains visible and anchored at the bottom of the screen, while allowing the middle content to scroll as new content is added. The method I have implemented for achieving this effect is as follows: /* Re ...

html css

Populating a dropdown menu with data retrieved from a query in Microsoft SQL Server

Just starting out with Node and express and I'm attempting to populate two dropdowns with different query results. Specifically, I want one dropdown for date and another for name. I managed to successfully create a dropdown for date, but when I tried ...

html node.js express

Selenium 2.20+ and its interactive hover feature

I want to trigger the :hover effect that is defined in my CSS file using Selenium. Despite it being a common task, none of the methods suggested in previous threads seem to work anymore. Here are some attempts I've made (unsuccessfully) Selenium-In ...

java css selenium hover

Is it possible for the box-shadow CSS property to include padding?

Can a red outline like this be created around a shape using the box-shadow property but at a certain distance? ...

css reactjs

Ways to execute several actions within an HTML form

If I wanted to implement a double action in an HTML form, how would I go about it? The first action should direct to examle1.php And the second action should go to example2.php Currently, my code looks like this: <form name="input" action="" method= ...

html forms action

Is CSS3 Background Specification Still Incomplete?

Currently in Chrome, the background style specification is: background: color position/size repeat origin clip attachment image|initial|inherit; However, I am having trouble making the position/size fragment work; I should be able to use red top left 10 ...

css

Ways to navigate private property using the App Component in Angular 4

I have successfully implemented code in my app component to retrieve the current URL and display it in app.component.html. app.component.ts import { Component } from '@angular/core'; import { Router } from '@angular/router'; @Compone ...

javascript jquery html css angularjs

This method or property is not supported by the object - How to call an Applet in Internet Explorer 9

cmd > java -version Java Version : "1.7.0_11" (Updated) Java(TM) SE Runtime Environment (build 1.7.0_11-b21) Java HotSpot(TM) Client VM (build 23.6-b04, mixed mode, sharing) browsers = IE7,IE8,IE9 (The functionality works smoothly in Google Chrome and ...

java javascript html internet-explorer applet

Using onClick function to pass the value of an input textbox in PHP

I have an input text field and I am looking to pass the values entered inside the element through a JavaScript onClick event. <form> <fieldset> <label>Common Site ID: </label><span><?php echo $commonsiteid ?>< ...

javascript php jquery html

Automatically omitting a selector that mimics a switch

After conducting thorough research, I discovered a variety of solutions using jQuery and Vanilla. While one answer perfectly addressed my issue, it failed to integrate effectively with the rest of my code. So, I decided to modify the code from this Stack O ...

javascript html css

The timing of the RequestAnimationFrame function varies based on the dimensions of my canvas

In my application, I have a canvas that dynamically adjusts its CSS size based on the window size. The main gameplay loop in my code looks like this: run = function(){ console.log(timerDiff(frameTime)); game.inputManage(); game.logics(); ...

javascript html canvas requestanimationframe

Encountered an issue while attempting to send a POST request using AngularJS $

I am facing an issue with accessing the POST method from my server. Whenever I log the response, it always returns status=0. Can anyone help me out or provide some advice? Note: I have tested the method in Postman and it works fine. Below is the code snip ...

javascript html angularjs jax-rs

Using Python API to directly upload web files to Drive via URL

Currently working with the Drive REST v3 Python client library. I have successfully managed to upload files from my local machine to Google Drive. However, I am struggling to figure out how to upload files directly from the web to Google Drive using downlo ...

python html python-3.x file-upload google-drive-api

CSSer Q&A