Minimum and maximum padding and margin wanted
In What I Want From CSS3 - Part 1, Andy Budd notes that min-padding, max-padding, min-margin and max-margin would be very useful, especially for liquid layouts.
Yes indeed, that would be very useful. I suppose the properties Andy mentions would be the shorthand versions, so to specify the minimum amount of padding for an element you would write something like this:
min-padding: 0em 1em 1em 2em;
And the corresponding longhand would be this:
min-padding-top: 0em;min-padding-right: 1em;min-padding-bottom: 1em;min-padding-left: 2em;
- Previous post: Tips and techniques for mobile web design
- Next post: Requests for sIFR 3
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
Forget min-padding. It would be nice for an implementation of min-height/max-height (in IE that is).
As for min-padding, yeah that'd be nice. :-)
Can't say I'm missing min/max padding?
gradient and drop-shadow selectors would get my vote, and help to trim a few unnecessary images from my sites!
Oh, and corner... Especially if it handled the border too!
corner:radius 1em; /*bliss*/
Background-image resizing. Borders defined by set of 8 images.
Could be a good idea, however wouldn't a proper min/max on an element with a percentual padding do the same?
Actually, there are better ideas than introducing new properties for everything you'd want min/max variants for.
min(), max() and calc() functional notations have been suggested previously, with the idea being that you could specify something like:
margin: min(10%, 2em); padding: max(5%, 20px); width: calc(80% - 2em);
Chris: Almost, but not quite. Read Andy's post - he explains the problem with percentages.
Lachlan: That seems like a good idea.
One thing I miss sometimes is defining whether the scrollbar should be inside or outside (so when I tell a box to be 500 pixels wide, it is 500 pixels wide, not 500±scrollbar, depending on browser's mood).
Yeah, this would be nice. I've often run into situations when min-margins would be useful.
Sorry, comments are closed for this post.