Menu
I had checked Using a percentage margin in CSS but want a minimum margin in pixels?. It had how to implement a minimum margin when using percentage. But i am using
width:80%; margin:5px auto; How to set a minimum margin on the left side. i had used auto margin as per Reducing the space equally when resizing browser window
Thanks
267
Yes, you can! In 2020 this is now very straightforward using the CSS math functions: min(), max(), and clamp(). A min calculation picks the smallest from a comma separated list of values (of any length). This can be used to define a max-padding or max-margin rule: padding-right: min(50px, 5%);
The auto Value You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.
So in margin: 0 auto, the top/bottom margin is 0, and the left/right margin is auto, Where auto means that the left and right margin are automatically set by the browser based on the container, to make element centered.
The margin property may be specified using one, two, three, or four values. Each value is a <length> , a <percentage> , or the keyword auto . Negative values draw the element closer to its neighbors than it would be by default.
It might take another div to accomplish this task. I will refer to the div you are talking about as the #content div. I know that yours will have a bit more css. This is just my example of the margin in question. Next we would put the #content div in a div we will call #container. We will set the margins to auto in this div as well. The added aspect will be that we will add padding (right and left) to the #container div.
#content { margin: auto; } #container { padding-right: 5px; padding-left: 5px; } I think that this would achieve what you are looking for. Keep in mind a min-width for the #content div and it could work nicely.
122
I'm a little late, but here's an answer. Don't forget that you can style the HTML element!
html { padding: 20pt; } body { margin: auto; } That's it!
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
