Comments on: padding

By: Geoff Graham

Geoff Graham — Tue, 14 Aug 2018 15:40:50 +0000

In reply to Mr Alexander.

It’s covered across the board: https://caniuse.com/#feat=css3-boxsizing

By: Mr Alexander

Mr Alexander — Mon, 13 Aug 2018 23:14:01 +0000

Hello,

Do you happen to know the browser support for the shorthand syntax?

padding: [value] [value] [value]

By: johnny

johnny — Fri, 12 May 2017 04:35:29 +0000

In reply to ankit. unfortunately you can not make it without using javascript. sorry

By: soggysnack

soggysnack — Wed, 04 Jan 2017 04:15:15 +0000

In reply to Fin. it seems your browser is adding your padding values to its own default values, giving you more padding than you asked for :p you should try normalize.css

By: ankit

ankit — Tue, 06 Sep 2016 15:57:52 +0000

How can i make top h1 by css without using negative value or margin
anyone can help me on this one
Thanks in advance

By: Yanakorn Chaeyprasert

Yanakorn Chaeyprasert — Mon, 18 Jul 2016 14:28:40 +0000

On a normal day of making website, my box model error occur, it seems that i can't type a shorthanded code, it's just show the error that invalid value, can you fix?

body {
  font-family: "Crystal","Noto Sans", sans-serif;
}

header {
  display: inline-block;
  padding-left: 15%;
  padding-right: 15%;

  /*

  error occur when i do:
  padding: 0, 15%;
  which results as not working, why?

  */
}

#logo {
  width: 30%;
  height: auto;
  padding: auto, 35%; /* Not working here, too */
}

By: Richard Karamon

Richard Karamon — Sun, 29 May 2016 17:55:00 +0000

I am looking for the explanation of the CSS syntax that I found in one of the style sheets. It looks like this, padding-%AlignStart: 20px;
Is this %AlignStart a variable here? Where does it come from, HTML? I did not know that we can pass variables to CSS like that? Did you see a book or a tutorial on the web, that explains this syntax? Here is the full code.

#pthdr2container #pthdr2home {
background: url(%Image(PT_HEADERLINK_HOME_ALT)) no-repeat scroll %AlignStart center transparent;
padding-%AlignStart: 22px;
}

By: Rahul Kumar

Rahul Kumar — Mon, 02 Nov 2015 03:08:31 +0000

Great Article, I got most of the things about using css padding.

I saw a very helpful tutorial on youtube: https://www.youtube.com/watch?v=Jb3f2Un5Ru8

By: neel

neel — Tue, 15 Sep 2015 09:14:18 +0000

Thanks for nice article. I have one question regarding padding; what will be box size if I used following code(just for testing)? And WHY?

.box {
 padding: 500px;
 width: 400px;
 box-sizing: border-box;
}

By: M.ARUN

M.ARUN — Thu, 08 Jan 2015 11:15:58 +0000

Thank you
I had learned lot

By: Fin

Fin — Thu, 28 Nov 2013 10:27:48 +0000

Thanks for this simple and nice article. Related to padding stuff I got something that occurred in my current project. This is the first time I encountered something like this. I set my padding : 5px. But my browser (I'm using chrome and FF) display it wrong, the top and bottom is to far longer than 5px. The left and right padding seems right. Could you tell me what is possible wrong in my CSS? Thanks.

body{
overflow: hidden;
margin: 0;
padding:0;}

header{
outline: 1px solid black;
text-align: center;
width: 100%;
padding: 5px; }

header span{
display: inline-block;
width: 60px;
height: 60px;
background: url("../images/logo.png") center center no-repeat;
outline: 1px solid black;
vertical-align: middle;
padding: 0 20px 0 0;}

header h1{
font-family: "cubano";
color: #e74c3c;
font-size: 44px;}

By: Doron

Doron — Wed, 09 Jan 2013 16:26:17 +0000

Hey! that’s an awesome website, I learned a lot from reading here.
Wanted to know what about the padding and the margin properties?

Thanks, great site, great content!