CODEWITHSUNDEEP
htmlcss
user2469520
user2469520

Reputation:

CSS Padding Scheme

I'm thinking of creating some CSS styles for padding and margin that would work something like this...

If you want to add padding to all four sides...

<div class="Pad4">

If you want to add padding to the top and bottom...

<div class="PadV">

If you want to add padding to the left and right sides...

<div class="PadH">

Similar styles would designate padding for the top (PadT), bottom (PadB), left (PadL) or right (PadR) sides.

The second class of styles would designate the amount of padding or margin. For example, 10 = 10 pixels, 25 = 25 pixels.

You would then put it together, like this:

<div class="PadV 10 PadH 25">

This particular div would then have 10 pixels padding on the left and right sides and 25 pixels on the top and bottom.

Of course, this won't work exactly as I've described it because of a number of issues. For example, imagine these two div's...

<div id="Uno" class="PadV 10 PadH 25">
<div id="Dos" class="PadV 25 PadH 10">

If I then have the following style...

.PadV.10

how could I make sure it only gets applied only to div#Uno, not to div#Dos?

And perhaps an even more important question - does my scheme sound like a good idea, or is it too verbose, amateurish or whatever?

Upvotes: 0

Views: 640

Answers (4)

uttamcafedeweb
uttamcafedeweb

Reputation: 73

The idea you are after is cool but i dont think this is a good way to control margins and paddings.

.PadV.10

can looks easier to use but messes up when used with integers which coould represent anything, margins or paddings.

.pad.v10 .pad.h10
.mar.v10 .mar.h10

is a better way of doing it. just my view. so you can know all three aspects of CSS properties (i.e. its a padding where top and bottom (verticle) values are 10px and left and right (horizontal) values are also 10 ). Just my view.

Good Luck

Upvotes: 0

guest
guest

Reputation: 6718

CSS classes are unordered sets, so you can't distinguish the two divs with class selectors. You should probably go with the great advice of the other answerers.

But just for fun, I made a proof of concept that abuses attribute selectors to do it. For example,

[class*="PadV 10"]{padding-top:10px;padding-bottom:10px;}

http://jsfiddle.net/A8Ury/

Upvotes: 0

Hashem Qolami
Hashem Qolami

Reputation: 99554

Generally a classname must begin with an underscore, a hyphen, or a letter then it could follows by a number; Unless you should escape the numeric character.

I suggest using something like padding v10 h25 instead.

In this approach the padding determines the property and v10/h25 determine the values.

.padding.v10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.padding.h25 {
  padding-left: 25px;
  padding-right: 25px;
}

Same for margin (if it's needed):

.margin.v10 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.margin.h25 {
  margin-left: 25px;
  margin-right: 25px;
}

Upvotes: 0

dave
dave

Reputation: 64717

It seems pointless to me, if I'm going to type out

<div id="Uno" class="PadV 10 PadH 25">

I may as well just do inline styling

<div id="Uno" style="padding: 10px 25px">

Upvotes: 1

Related Questions