Adjust the left and right margins while maintaining the vertical margin spacing

Is there a way to apply horizontal margin while inheriting vertical margin without explicitly setting margin-left and margin-right? I was hoping for something like margin: inherit 20px; to be effective.

Take a look at the example here: https://jsfiddle.net/cm8kwfok/1/

Html:

<div class="outer">
    <div class="inner horizontal-margin-working">
        Working but not ideal
    </div>
    <div class="inner horizontal-margin-notworking">
        Not working as expected
    </div>
</div>

Css: .outer { background: #27ae60; padding: 10px; }

.inner {
    margin: 10px;
}

.horizontal-margin-working {
    margin-left: 50px;
    margin-right: 50px;
}

.horizontal-margin-notworking {
    margin: inherit 50px;
}
csshtmllayoutsass

Answer №1

Unfortunately, it is not possible to maintain the vertical margins when utilizing the shorthand property. This is due to:

  • In CSS, if multiple selectors are applicable to an element, the values specified in the most recent or more specific selector will take precedence for common properties. In this case, the margin is declared in both the .inner and another class selector, causing the one within .inner to be overwritten.
  • The use of inherit (along with a length value) is not supported for the shorthand margin property, while it is valid for longhand margin-* properties or when used alone in the shorthand. Additionally, since margin: 10px is applied in the .inner selector which pertains to the same element (not the parent), using inherit will not be effective.
  • Although auto is a recognized value for margin, it does not preserve the margin specified in a previous selector. It instructs the User Agent to calculate and assign an appropriate value, potentially setting the margin-top and margin-bottom to 
    10px</code based on various factors.</li>
<li>When providing a length value (in pixels or percentage) for the <code>margin
    property, the User Agent determines how to interpret the value based on the number of values given. For instance, one value sets all sides, two values address vertical and horizontal margins, and so forth.

In essence, overriding the margin-left and margin-right specifically (as seen in .horizontal-margin-working) is the only method to retain the vertical margin.

Answer №2

avoid the margin:inherit 50px;

try this instead

.horizontal-margin-notworking {
    margin-top: inherit;
    margin-bottom: inherit;
    margin-left: 50px;
    margin-right: 50px;

}

Answer №3

Here's how you can use it:

<style>
.outer {
  background: #27ae60;
  padding: 10px;
}

.inner {
  margin: 10px;
}

.horizontal-margin-working {
  margin-left: 50px;
  margin-right: 50px;
}

.horizontal-margin-notworking {

margin-top: inherit;
margin-bottom: inherit;
margin-left: 50px;



}

</style>
<div class="outer">
  <div class="inner horizontal-margin-working">
    This is working but not ideal
  </div>
  <div class="inner horizontal-margin-notworking">
    Unfortunately, this is not working as expected
  </div>
</div>

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

Having an issue with jQuery where trying to append a remove button to a list results in the

Looking to create a dynamic list where users can easily add new items by clicking a button. As each item is added, a corresponding remove button should also be displayed. The issue I'm facing is that every time a new item is added, an extra close but ...

javascriptjqueryhtmlcss

Hide the button when you're not actively moving the mouse, and show it when you start moving it

How can I make my fixed positioned button only visible when the mouse is moved, and otherwise hidden? ...

javascripthtmlcss

What is the best way to position a sidebar alongside content using flexbox?

As a newcomer to web development, I recently attempted to use flexbox for the second time while working on the layout for my website. However, I encountered an issue with trying to float aside next to content. Despite my efforts, it seems to just disappear ...

htmlcssflexbox

Steps to revert table data back to its original state after editing in Angular 12 template-driven form

Currently, I have implemented a feature in my web application where users can edit table data by clicking on an edit hyperlink. Once clicked, cancel and submit buttons appear to either discard or save the changes made. The issue I'm facing is related ...

htmlangulartypescriptangular2-template

Is it more beneficial to enhance the style within a vue.js app or to delegate the task to the website that is

Hello there! I am currently working on my first vue.js app and I could use some assistance in deciding on a design strategy. This app will be integrated into a page of a website that is created using Drupal 8. Both the app and the site will utilize bootstr ...

vue.jssassdesign-guidelines

Issue with vertical alignment in form input text area not functioning properly

Need some help aligning inputted text with the top of a textarea on an HTML form. I've scoured forums for solutions, but no luck so far. I attempted using: textarea{ vertical-align:top;} and input["textarea"]{ vertical-align:top;} Tried adding ...

htmlcsstextareavertical-alignment

I desire my grid to exhibit an identical appearance to that of the jquery datepicker

I have an interactive element called the "open grid" that, when clicked on, reveals a grid of buttons. I'm looking for help with coding it so that instead of being displayed below the textbox, the grid of buttons can be hovered over the "open grid" li ...

jquerycssbuttongrid

Internet Explorer and CSS: How to eliminate a highlight that pops up when the button is clicked

Could you please check out this website in Internet Explorer (I've tried it on the latest version as well as older versions.) On the above link, there are two circular buttons at the bottom of the page. In IE, when you click on a button, a semi-trans ...

htmlcssinternet-explorerhighlight

Changing the color of a progress bar in Bootstrap based on a specific percentage level

var elem = document.getElementById("progress-bar"); var progress = 75; elem.style.width = 80 + '%'; if (progress > 80) { elem.style.background = "red"; } #myProgress { height: 5px; } #progress-bar { w ...

javascripthtmlcsstwitter-bootstrapprogress-bar

Is there a way to extract an email address from a database and have it securely and seamlessly added to the recipient field of an email service provider?

I'm currently working on a program that allows an admin to easily select a group of email addresses from a database. Once the admin clicks on a submit button, Yahoo will automatically open and the email addresses will be inserted into the receiver tex ...

phphtmlemailtextboxproject

How can I add page transitions to my simple HTML website?

Working on an internal website project for my office using vue.js has been a rewarding experience. I appreciate how easily it allows me to manage multiple pages with dynamic content and seamless transitions. Unfortunately, my IT department is hesitating to ...

javascripthtmlvue.jscss-animations

Adjusting element placement on collapsed navbar using Bootstrap

I've been developing a navbar for a webpage and have successfully aligned the data left and right with the Brand in the center. However, when the navbar collapses, the alignment shifts to Left (over) Brand (over) Right. I want the Brand to remain at t ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Tips for aligning a Bootstrap container in the middle of the viewport vertically

I'm struggling to center a Bootstrap container vertically in the viewport. You can view my code at http://www.bootply.com/C8vhHTifcE All of my attempts at centering have been unsuccessful. Does anyone have a solution? Just to clarify: I want the co ...

htmlcsstwitter-bootstrap

As you hover over the chosen image, the selected image will appear

I have a simple HTML code with some JavaScript where I display sets of images. All I want is for the images to pop up when hovered over, appearing in a larger size. Below is the example HTML Code: <div class="content-box-left-bootomgrid lastgrid"> ...

jqueryhtmlimage

When attempting to call an XML node with JavaScript in an HTML file within Dreamweaver, the functionality works as expected. However, upon testing the same code on a server

As a beginner in Javascript, I am attempting to use document.write to display some XML data in an HTML format. Below is the code that I have been working on: <script> function loadXMLDoc() { if (window.XMLHttpRequest) { xhttp=new XMLHttpRequest( ...

javascripthtmlxmlinnerhtml

Can a ng-repeat value be assigned to a text input field?

<tr ng-repeat="person in users" ng-class="{'chosen': person.AdmissionID == currentSelection}" ng-click="selectRow(person.AdmissionID)"> <td>{{person.AdmissionID}}</td> <td>{{person.AdmissionNumber}}</td> ...

javascripthtmlangularjs

Difficulty encountered with cURL while attempting to submit information to a Gravity Form on an external website

I am managing two DISTINCT websites: Website A: An interactive Wordpress site featuring a Gravity Form. Website B: A separate non-Wordpress site that hosts a basic form - the information collected from this form needs to be transferred to Website A' ...

phphtmlwordpressformscurl

Unlocking the power of HTML tags in Selenium WebDriver: accessing elements like a pro

I'm working with this HTML snippet. <span class="ng-binding" ng-bind="::result.display">All Sector ETFs</span> <span class="ng-binding" ng-bind="::result.display">China Macro Assets</span> <span class="ng-binding" ng-bind ...

htmlseleniumselenium-webdriver

Ways to stop a JS plugin affecting HTML anchors and preventing them from automatically scrolling to the top

My friend is working on a website and he's using a plugin called Flip Lightbox. The basic functionality of the plugin is that when you click on an image, it flips over and pops out as a lightbox. Everything works fine, however, if you scroll down the ...

javascriptjqueryhtmlcss

Having trouble with the input range slider on Chrome? No worries, it's working perfectly fine

I'm currently facing an issue with an input range slider that controls the position of an audio track. It seems to work perfectly in Firefox, but in Chrome, the slider gets stuck and doesn't move when dragged. There is a function in place that up ...

javascriptjqueryhtmlaudio