CODEWITHSUNDEEP
htmlcsspadding
GOTO 0
GOTO 0

Reputation: 47761

How to set only vertical padding?

Sometimes I would like to set top and bottom padding explicitly on an element but leave left and right padding to the unchanged browser default. I know I can write

.myElement { padding-top: 20px; }
.myElement { padding-bottom: 20px; }

but this way I need to repeat both the selector .myElement and the length value twice - or rather copy and paste the whole line and switch left with right. I was hoping to find something less redundant, so I tried to use padding with two values and replace the second length with inherit. That's not good CSS, I know, it was an attempt, but it doesn't work either (sets horizontal padding to 0):

.myElement { padding: 20px inherit; }

See here: http://jsfiddle.net/185ty3yp/

Any advice how to do it better?

Upvotes: 29

Views: 40288

Answers (7)

Jibin John
Jibin John

Reputation: 349

you can use padding-block property to set vertical padding and padding-inline to set horizontal padding.

padding-block: 20px; /*vertical padding */
padding-inline: 20px; /*horizontal padding*/

The same goes for margin, use margin-block to set vertical margin and margin-inline to set horizontal margin.

margin-inline: auto; can be used to center a div.

Upvotes: 16

Ian 1989
Ian 1989

Reputation: 46

I understand one of the reasons for finding vertical padding might be wanting just to change one place in future modification. If so, we can try:

.element{
    --title-vertical-padding: 20px;
    padding-top: var(--title-vertical-padding);
    padding-bottom: var(--title-vertical-padding);
}

Upvotes: 1

Adam Taylor
Adam Taylor

Reputation: 4839

These days you can do it like this:

.myElement { padding-block: 20px; }

Browser support

Upvotes: 14

enguerranws
enguerranws

Reputation: 8233

If I understand what you want : you're looking for a way to only assign vertical padding with padding property (and keep original horizontal padding if it's set).

So you already have the answer : 

.myElement { padding-top: 20px; padding-bottom: 20px;  }

You can't do that only with padding property, or you'll need to set horizontal value.

Or, you can consider using CSS preprocessors (such as Sass or Less), it will surely helps you to achieve this.

Upvotes: 17

Gho
Gho

Reputation: 568

#ul1, #ul2{
  padding:20px 0; /* top and bottom 20px, left and right 0 */
}

http://www.w3schools.com/css/css_padding.asp

you can only set padding to either a fixed length or a percent, no other values I'm afraid

Upvotes: 0

Seminda
Seminda

Reputation: 1773

You can try like this

padding: 20px 50px 75px 100px;

//top padding is 20px
//right padding is 50px
//bottom padding is 75px
//left padding is 100px

In your case you can apply like this if it is common for any ul

ul
{
  padding-top: 20px;
  padding-bottom: 20px;
}

any specific places you can override this css.

check Demo

Upvotes: -1

Alex Wilson
Alex Wilson

Reputation: 2419

try this code DEMO

#ul1, #ul2 {
    background-color: cyan;
    padding-top: 20px;
    padding-bottom: 20px;
}

#ul2 {
    background-color: yellow;
}

Upvotes: -1

Related Questions