Reply to thread

Message

<blockquote data-quote="Sysode" data-source="post: 293984" data-attributes="member: 25453">Quite often when people are asking for help, I notice in their CSS they write something like:[CODE].element {
&nbsp; &nbsp;&nbsp; margin-top:5px;
&nbsp; &nbsp;&nbsp; margin-bottom:15px;
&nbsp; &nbsp;&nbsp; margin-right:5px;
&nbsp; &nbsp;&nbsp; margin-left:25px;
}[/CODE]
Notice how you've written a specific style 4 times over? This just becomes tiring and annoying after time. This is where the shorthand method comes in, it's essentially the same but allows you to write it in one simple line. So, for example, lets copy the above code but using the shorthand method:[CODE].element {
&nbsp; &nbsp;&nbsp; margin: 5px 5px 15px 25px;
}[/CODE]There is NO need to include -right, -left, -top and so on. It's all done on one line. Here's how I remember which order to do them in: T(op) R(ight) ou B(ottom) L(eft) e&nbsp; = Trouble. This works for any element that has -right,-left-bottom and so on. So for example, you can use padding, borders etc. Not sure if I've explained it overly well, if you need any support just comment below.</blockquote>

[QUOTE="Sysode, post: 293984, member: 25453"] Quite often when people are asking for help, I notice in their CSS they write something like: [INDENT][CODE].element { margin-top:5px; margin-bottom:15px; margin-right:5px; margin-left:25px; }[/CODE] [/INDENT] Notice how you've written a specific style 4 times over? This just becomes tiring and annoying after time. This is where the shorthand method comes in, it's essentially the same but allows you to write it in one simple line. So, for example, lets copy the above code but using the shorthand method: [INDENT][CODE].element { margin: 5px 5px 15px 25px; }[/CODE][/INDENT] There is NO need to include -right, -left, -top and so on. It's all done on one line. Here's how I remember which order to do them in: [SIZE=5][COLOR=#ff0000]T[/COLOR](op) [COLOR=#ff0000]R[/COLOR](ight) ou [COLOR=#ff0000]B[/COLOR](ottom) [COLOR=#ff0000]L[/COLOR](eft) e = Trouble. [/SIZE] [SIZE=3]This works for any element that has -right,-left-bottom and so on. So for example, you can use padding, borders etc. Not sure if I've explained it overly well, if you need any support just comment below.[/SIZE] [/QUOTE]

Verification

Reply to thread

Connect with us

Newest members