I have limited knowledge of HTML and CSS, so I am unsure how to search for a similar post on StackOverflow. My apologies if this is a duplicate question.
I am looking to achieve the following:
margin-horizontal
{
margin-left: value;
margin-right: value;
}
<div style="margin-horizontal: 50px">
Is there a way to implement this functionality?
Custom CSS properties might be exactly what you need. Check out this example below.
CSS:
:root {
--padding: 20px;
}
.section
{
padding-left: var(--padding);
padding-right: var(--padding);
}
HTML:
<div class="section">...</div>
In addition to Chris05's response, you have the option to dynamically adjust the CSS variables using JavaScript.
document.documentElement.style.setProperty('--space', '150px');
document.documentElement.style.setProperty('--space2', '20px');:root {
--space: 50px;
--space2: 50px;
}
div {
color: white;
text-align: center;
background-color: #454545;
margin-top: 10px;
}
.margin-horizontal {
margin-left: var(--space);
margin-right: var(--space);
}
.margin-horizontal2 {
margin-left: var(--space2);
margin-right: var(--space2);
}<div class="margin-horizontal">150px margins</div>
<div class="margin-horizontal2">20px margins</div>To elaborate on @chris05's response, in order to have varying margin values for different divs, you can assign a class that defines the CSS variable with a distinct value. For example:
.m-25 {
--space: 25px;
}
.m-75 {
--space: 75px;
}
This way, the default margin will be set at 50px, but if you need a different one, simply add a modifier class:
<div class="margin-horizontal">Foo</div>
<div class="m-25 margin-horizontal">Bar</div>
Here is how it would appear:
What is the desired outcome you are seeking?
If you wish to incorporate your custom CSS class into your HTML code, you should assign the div a class named 'margin-horizontal'. For example: div class="margin-horizontal"
In my current project, I am using NextJS 13 with TypeScript but not utilizing the app router. I am facing an issue while trying to pass data over router.push to a dynamically routed page in Next.js without compromising the clarity of the URL. router.push({ ...
Is there a way to capitalize only the first letter of a string if it's a letter, without changing the case of any other letters? For example: "this is a test" → "This is a test" "the Eiffel Tower" → "The Eiffel ...
I'm having an issue with a link on my webpage that is supposed to show or hide a <div id="po" style="display:none;">some html</div> element. The first time I click the link, the div displays properly. However, after tha ...
In my Angular 2 application, I am using an observable to keep track of an array of records. As the results of this observable are stored in the variable "records", I am utilizing *ngFor="let record of records" to iterate over and display them in my view. ...
//In the following JavaScript code, I am trying to implement basic routing navigation using express. However, when I try to insert HTML into the demo page, nothing appears on the browser screen. const path = require("path"); const app = ...
Is there a way to reduce redundancy in my code, such as: let name = ""; try { name = data[" "][0][" "][0][" "][0][" "][1][" "][0][" "][1]["C"]; } catch (error) { if (error instanceof TypeError) { console.log("name TypeError"); } } I have consid ...
I'm currently using the font Gilroy-Bold for my project, but I'm facing inconsistencies between how it appears in Figma and my React application, even though they are both sourced from the same place. Figma: https://i.stack.imgur.com/3QvY4.png ...
After extensive testing on all the browsers available on my computer, I implemented error handling and encountered no issues. The script is simple and works, but not as intended. When scrolling down, the bar should change to red, and while scrolling up, ...
Background Information Currently, I am in the process of developing a traditional web application with most forms operating through AJAX. I am facing challenges in connecting the user interface to the model. As of now, I have to explicitly: Specify the ...
Seeking assistance in navigating through a UL element to modify the LI and nested UL classes when .has_children is detected. Take a look at this example: <ul class="nav navbar-nav"> <li class="first current parent">Link1</li> < ...
login.js file: const form = document.getElementById('loginForm'); form.addEventListener('submit',async(e)=>{ e.preventDefault(); return await fetch(`localhost:8000/route`, { method: "get", heade ...
When I apply the CSS rule letter-spacing: 16px;, I observe that the characters are aligned to the left within their designated space, causing the cursor to jump towards the right as if an additional space was added after each character. I am wondering if ...
I'm having trouble getting the buttons inside the menu bar to align properly. Does anyone have any suggestions on how to fix this? I'm not very experienced with coding, so any assistance would be greatly appreciated! .main-navigation { clear ...
Working on my customized social media platform, I have implemented a feature where users can send friend requests by clicking on a button. <form action="/requests" method="POST"> <input type="hidden" name="send ...
I'm currently working on setting up a queue system where users can move items between different lists, such as from "available" to "with client". The queue's state is managed in the root React component like this: this.state = { queue: { a ...
I utilized an online tool to generate custom SVG CSS at this link: Upon implementing it on my webpage, the rendering seems correct in terms of height and width. However, upon inspecting the page, I noticed that the SVG file dimensions are 1512px by 1512px ...
As visitors click on products on my site, I am storing their IDs in a cookie. Each click adds the new ID to an array stored in the cookie. This is how I set up the cookie and its current value after a few clicks: var cookieArray = []; cookieArray.push( ...
Is there a way to execute multiple actions within one gulp task? I have tried using event-stream's merge feature following the example in How to perform multiple gulp commands in one task, but it doesn't work properly when combined with the del p ...
I attempted this using the XPATH finder in Chrome, and it highlighted the element. However, when running my Selenium script, I received the following error: Caused by: org.openqa.selenium.NoSuchElementException: no such element: Unable to locate element: ...
I am facing a simple problem with my handlers for /login get and post requests. Here is the code: loginRender(req, res) { let options = { title: 'Login', layout: 'auth.hbs' } res.render('login', options) } logi ...