4

I want to specify all properties ( top,right,bottom,left ) in one single line of CSS like how we are specifies margin:50px; ( margin-top:50px,margin-right:50px,margin-bottom:50px,margin-left:50px )

Is there any way to do this?

Thank you

Frits
  • 7,341
  • 10
  • 42
  • 60
Doddanagouda
  • 41
  • 1
  • 2
  • 2
    yes, you can use all properties in single line css – Mukesh Ram Jun 22 '16 at 06:16
  • @MrLister it is most definitely possible, it's called CSS shorthand. Unifx answer shows the correct way to do it. Have a look here: https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties for a detailed explanation :) – Frits Jun 22 '16 at 06:18
  • Ah - I am assuming you thought he was asking whether he could define the CSS rules for `top: 0px; left:0px;` etc in shorthand. I thought so too at first until I read the first answer, and then reread the question ;) – Frits Jun 22 '16 at 06:29
  • I understand the same as @Mr Lister, I think the OP wants to use shorthand with top, bottom, right and left propieties –  Jun 22 '16 at 06:30
  • 1
    In that case is not possible and there is a similar question here. http://stackoverflow.com/questions/10855276/css-shorthand-for-positioning –  Jun 22 '16 at 06:39

5 Answers5

6

yeah the correct way is like so. It goes Top right bottom left.

margin: 10px 20px 50px 30px;

so its 

margin: top right bottom left;

Ok so I am not to sure what you are asking. Still.

So I will try my best.

Margin works like so. There is 4 sides as you stated, top right bottom left, a clock wise motion.

You can target each one like I have done above OR if they are all the same you can do this

margin: 20px;

however if the left and right are the same and so is the top and bottom you can do this

margin: 20px 30px;

eg i use 

margin: 0 auto;

all the time

You can also do

margin: 20px 30px 10px;

which will target the top with 20px the right with 30px the bottom with 10px and the left with 30px

If you only want the right you can do this

margin-right: 20px;

the same goes for margin-top, margin-bottom, margin-left.

Michael Mano
  • 3,339
  • 2
  • 14
  • 35
  • 2
    It might be worth adding (for interest sake / ease of remembering) that the order follows a clockwise direction starting at the top. :) – Frits Jun 22 '16 at 06:16
  • yes i got it my question is usually we will use sometime right:0,top:0,left:0,bottom:0, four times we need to write instead of writing like this is there any way to write in single line ( ex. margin:10px ) – Doddanagouda Jun 22 '16 at 06:17
  • 1
    @Frits Which is the ONLY way I remember it - where remembering = moving by hand about :} – user2864740 Jun 22 '16 at 06:17
  • yeah, it comes naturally now haha, it used to mess me up all the time – Michael Mano Jun 22 '16 at 06:26
5

The easiest way to do it is by using the inset property.

For instance, both

top: 5px;
bottom: 10px;
left: 8px;
right: 8px;

and

inset: 5px 8px 10px 8px;

do the same thing.

You can find deeper information & examples here: https://developer.mozilla.org/en-US/docs/Web/CSS/inset

Enzo
  • 51
  • 1
  • 3
2

So you're asking how to specify margin-top, margin-left, margin-bottom and margin-right on one line?

Easy:

You can use for example. margin: 25px 50px 75px 100px;. This will result in the same as: 

margin-top: 25px;
margin-right: 50px;
margin-bottom: 75px;
margin-left: 100px;

The same applies to the padding property.

See more http://devdocs.io/css/margin and http://devdocs.io/css/padding

Rando Hinn
  • 1,255
  • 19
  • 41
2

You can use inset like this:

inset: 5px 3px 1px 10px;

The order is top, right, bottom, left

PersonWhoIsStuck
  • 133
  • 1
  • 7
0

There is many options for value assign in on line:

  1. all side same value: margin:10px;
  2. all side need different value: margin:10px 20px 30px 40px (top, right, bottom, left)
  3. top-bottom and left-right need same value: margin: 10px 30px;(top-bottom, left-right).

Same as all you can use in padding as well.

Pradeep Pansari
  • 1,287
  • 6
  • 10