So I have this html code:
<!DOCTYPE html>
<html>
<body>
<div style="background-color:black;color:white;padding:20px">
<h2>London</h2>
</body>
</html>
My question is, what does the padding:20px property do in the style attribute for the div element? Is that the same thing as doing padding:top=20px, padding:right=20px, padding:bottom=20px, padding:left=20px?
I tried putting (padding:top=20px, padding:right=20px, padding:bottom=20px, padding:left=20px) in the h2 element as an attribute like this (removed padding:20px from the style attribute in the div element):
<h2 padding:top=20px, padding:right=20px, padding:bottom=20px, padding:left=20px>London</h2>
But for some reason the line above gave me a different output than putting the padding:20px in the style attribute of the div element. Can someone please explain me this difference? Thank you in advance for the help!
Your syntax is full of errors.
It has to be
<h2 style="padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px">London</h2>
and yes, in short this is identical to
<h2 style="padding: 20px">London</h2>
There is also three other short forms:
/* applies 10px top/bottom, and 5px left/right */
padding: 10px 5px;
/* applies 10px top, 0 to bottom, and 5px left/right */
padding: 10px 5px 0;
/* applies 1px top, 2px right, 0 bottom, 4px left (clockwise, starting at top) */
padding: 1px 2px 0 4px;
not valid
<h2 padding:top=20px, padding:right=20px, padding:bottom=20px, padding:left=20px>London</h2>
use
h2{
background: #ccc;
}
<h2 style="padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px">London</h2>
Fiddle
Yes, padding:20px; applies the same amount of padding to all sides of your element.
Also, your HTML is incorrect. Do this:
<h2 style="padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px">London</h2>
Or simply,
<h2 style="padding:20px">London</h2>
yours, h2 padding style is incorrect.
you should add style for the h2 element.
<h2 style="padding:20px">London</h2>
If you're gonna apply padding to all sides simultaneously, you're better off just using padding:20px as a value for style since it cuts down on code size.
See this link for more examples on the use of CSS padding:
http://www.w3schools.com/css/css_padding.asp
try this. you will know how the padding works. padding is for positioning the text/element in an element(parent)
<div style="background-color:black;color:white;padding:20px">
<h2 style="border: solid 1px red">London</h2>
</div>
Padding:20px will apply padding in all 4 directions .
You can also write this way padding:20px 20px 20px 20px; this goes like this padding : top right bottom left
SO instead or write padding-right, padding-top and other two, one can simply write padding and apply the right left top bottom padding value to it. This method is helpful when we want to apply different padding values for all directions. Like padding: 5px 10px; This will apply padding 5px in top and bottom and 10px from left right;
Also, your HTML is incorrect. Do this:
<h2 style="padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px">London</h2>
OR
<h2 style="padding:20px 20px 20px 20px;">London</h2>
Or simply,
<h2 style="padding:20px;">London</h2>
Your css syntax is incorrect
The correct syntax is:
<h2 style="padding-top=20px; padding-right=20px; padding-bottom=20px; padding-left=20px;">London</h2>
OR
<h2 style="padding=20px;">London</h2>
OR
<h2 style="padding=20px 20px 20px 20px;">London</h2>
h2{ padding:20px;}`<h2 style="padding:20px">London</h2>`
Your syntax is totally wrong.It would be
<h2 style="padding-top: 20px; padding-right: 20px; padding-bottom: 20px;
padding-left: 20px">London</h2>
Also if you want to give padding to all sides you can use as below :
<h2 style="padding: 20px;">London</h2>
Or you can also write like padding:10px 20px 30px 40px; it means padding-top:10px,padding-right:20px,padding-bottom:30px,padding-left:40px,
Padding: 10px 20px it means padding-top:10px,padding-bottom:10px,padding-left:20px,padding-right:20px
Padding: 10px 30px 20px it means padding-top:10px,padding-bottom:20px,padding-left:30px,padding-right:30px
h2{
background: #ccc;
}
<h2 style="padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px">London</h2>
padding:20px means you give 20px padding from top right bottom left. Do you mean padding-top, padding-right.... rather than the padding:right, padding:top etc.. cos this one is not working on mine.
I am scratching my head to resolve this issue but without success.
It is very simple: a div with rounded corners with a h3 on the top (I am trying to simulate a panel with title), very simple.
For some reason, the h3 always has a space, feels like it has a margin or something.
.example-wrapper {
border: 1px solid #555;
border-radius: 10px 10px 0 0;}
.example-wrapper h3 {
background: #555;
color: #fff;
border-radius: 10px 10px 0 0;
padding: 10px;
font-size: 16px;}
<DIV class="example-wrapper">
<H3>Herry Potter</H3>
</DIV>
Any comments would be appreciated.
You can find the issue here.
Yes, H# has margins by default. Set H3{ margin: 0; } to solve it. You can always use developer tools to inspect elements and see any style applied to them.
http://thc-cup.ucoz.com/forum/2-1-1
After you can see, the left has a radius at content background and border, but the left one does not! I managed to get it like the one in the left after adding to the div style: display:inline-block; but that messes the box and moves it under the left block.
Since this is a forum (my link) I can't edit html, but I can edit the CSS of the forum.
Here is the style of those blocks:
.postTdInfo { //Left block
display: inline-block;
margin: 0px 0px 0px 35px;
padding: 1px;
border: 1px solid #cfcfcf;
background: #e0e0e0;
border-radius: 5px;
}
.posttdMessage { //Right block
margin: 0px 0px 0px 0px;
padding: 25px;
border: 1px solid #cfcfcf;
background: #e0e0e0;
border-radius: 25px;
I searched all the day for a solution but can't seem to find one.
Is there any way of changing CSS so that the block accepts border radius?
Edit: my first answer didn't solve the problem.
The problem is that you're working on a td element, which has the display property by default set to table. Either add display: block; to .posttdMessage, or, if this causes problems, add another <div> element directly inside the table cell and style that with rounded borders instead.
Here is the pretty short fiddle which includes a 20px by 20px "ruler". I expect my p tag to be 20px high...10px text, and 10 px for the top and bottom padding (5px + 5px).
However it looks to be about 22px.
http://jsfiddle.net/BNnhp/30/
I have reset the body tag, the p tag and the div tag using margin 0px, padding 0px and line-height 100%.
Previously I had as a similar issue that was fixed by setting line-height to 100%....however this is not working here?
I want to know the exact cause - CSS attribute and value.
But for testing purposes I clicked the normalize box in jsfiddle and this had no effect either.
Added in more resets here:
http://jsfiddle.net/BNnhp/32/
I created a small test case, but it worked fine there. So, I went back to your answer, and found you were setting p's display value to inline, which was causing the 2px - 3px difference (fixed version). To fix, change your CSS as follows (look at comments):
/* ... */
#hold_name{
padding: 5px 5px 5px 5px;
/* position:relative; -- Don't need */
/* top: 0px; -- Don't need */
color:#000000;
/* display:inline; -- Don't need */
background: #ffffff;
font-size: 10px;
margin:0; /* Need to add */
line-height:100%;
}
#hold_name:hover{
}
#wrap{
position: absolute;
top: 20px; /* Change to 20px from 24px */
visibility: hidden;
margin: 0;
padding: 0;
border-left: 1px solid #007fa5;
border-bottom: 1px solid #007fa5;
border-right: 1px solid #007fa5;
}
/* ... */
The fact that your font-size is set to 10px doesn't promise you that the height would also be 10px. Some specific letters/symbols are higher than others.
If you change it to, say 8px like this:
#hold_name{
font-size: 9px;
}
then you will notice the container size changes as well.
This is because the tag re-sizes itself to contain the text inside.
You could set a specific height for your as well and it would change:
#hold_name{
font-size: 9px;
height: 10px;
}
and that would set the containing <p> element to a height of 10 pixels, no matter what the font-size is.
combining with the 5px padding on top and bottom, it would sum to 10px + 5px + 5px = 20px height.
While taking the other answers into consideration, you can also change the padding attribute of .menu-drop to match the following, then add a line-height of 20px:
.menu_drop{
position: relative;
margin: 0;
padding: 0 10px; /* modified padding value */
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #bfddec;
color: #2875DE;
font: 11px arial;
line-height: 20px; /* new line-height property */
}
I'm looking at the buttons used on twitter's home page, specifically the big orange 'signup' button. I see it is defined like this:
<p id="signup-btn">
<a id="signup_submit" href="/signup">
<span>Sign Up</span>
</a>
</p>
are they just using css to give the orange button appearance (which may just be a jpg), and also using css to specify the roll-over appearance (another jpg), and finally a third state for mouse-click (another jpg) to give the impression of a real clickable button?
If that's how it works, what should I look for to do the same thing? In my case I just want to make a button I guess, like:
<div class='mybutton'>Hello!</div>
.mybutton {
bgcolor: red;
bgcolor-mouseover: yellow;
bgcolor-mousedown: green;
}
yeah something like that would be great,
Thanks
Look at their CSS:
background: #FA2 url(http://s.twimg.com/a/1275412898/images/fronts/bg-btn-signup.png) repeat-x 0px 0px;
border: 1px solid #FA2;
border-bottom-left-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-top-right-radius: 5px 5px;
color: #333;
display: block;
font: normal normal bold 18px/normal Arial, sans-serif;
padding: 8px 10px;
text-align: center;
text-decoration: none;
text-shadow: #FE6 0px 1px 0px;
Haven't looked at it specifically, but that is entirely possible with CSS; they probably have a named style using the #signup-btn designation in CSS. To find out, you can use IE or FireFox with FireBug to examine the CSS and see exactly what they do for the button style. I would highly recommend that.
HTH.
I'd use a BUTTON element and CSS sprites. That way, you can style it however you like, and don't have to screw around with click() events in JS. Just use it wherever you'd use a regular button in a form.
EDIT: Coronatus, you should probably read this: Rediscovering the Button Element. They're remarkably easy to make visually consistent across browsers using a little CSS.