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.
Related
I have a problem with height button in e-mail.
When I open the html file email in a browser button it is displayed correctly.
html in browser
However, when it comes to e-mail the customer is too narrow.
html in e-mail
My code
<tr>
<td align="center">
<a href="{guest_tracking_url}?id_order={order_name}" style="background-color: #ee1000; color:#ffffff; display:block; width:220px; font-size:14px; line-height:40px; text-decoration:none; margin-top:20px;" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=sk&q={guest_tracking_url}?id_order={order_name}">Zistiť aktuálny stav objednávky
</a>
</td>
</tr>
Use padding, like that:
padding: 20px 30px;
And your text will be vertically centered in the button.
The browser may have some default padding, which the rendering engine of your email client doesn't have. So simpy set it manually uing padding.
In your case, you may want to specify the padding for top/bottom and left/right like this: padding: 5px 10px This would result in 5px top/bottom and 10px right-left: Feel free to define an invidivual padding to every side, which may not make much sense here, but is also possible if required by passing it clockwise like padding: 1px 2px 3px 4px (result: 1px top, 2px right, 3px bottom, 4px left)
Use padding instead of width
padding: 10px 20px; /* something like that */
UPDATE:
That's from an email I got this morning:
color: #fff!important;
text-decoration: none;
border: 0;
border-radius: 8px;
background: #651a84;
line-height: 1em;
padding: 18px 30px;
display: inline-block;
Remove the line height and add the padding
padding: 10px 15px;
Thanks for tips.
But when I add padding to button, text around too close button :/
img
After messing around with pseudo element css for a rather long time I've come up with a solution to the heading tag double ended custom image underline I required using the following code:
h2{
clear:both;
position:relative;
color:#000;
margin-left:83px;
background:url(http://i.stack.imgur.com/2eRq2.png) 0px 16px repeat-x;
font-size:1.5em;
float:left;
padding:0px 0px 10px 0px;
}
h2:after,
h2:before{
content:" ";
background:url(http://i.stack.imgur.com/AulCS.png);
display:block;
width:83px;
height:31px;
position:absolute;
bottom:0;
left:0;
margin-left:-83px;
margin-bottom:-10px;
z-index:-1;
}
h2:after{
background:url(http://i.stack.imgur.com/ux1ed.png);
right:0;
left:auto;
margin-right:-83px;
}
<h2>Frequently Asked Questions</h2>
<br>
<h2>Home</h2>
Which can be seen here:
http://jsfiddle.net/848s2335/1/
However I've noticed the 3 background images do not appear to stay in line when the page is zoomed in and out. Please could anyone point me in the right direction to keep all three images in line at all times?
Thanks for your help.
Instead use background image, use border-bottom, this will set the line at the bottom of h2, next set your bottom property of after and before to match with the same position of the border.
Remove this line on your h2:
background:url(http://i.stack.imgur.com/2eRq2.png) 0px 16px repeat-x;
Instead add this line:
border-bottom: 7px solid #000;
In your :before and :after css, change your bottom property to macth with border line:
bottom:-9px;
Fiddle
You could give the h2 element set height. I added height of 27px and it worked for me in your Fiddle:
h2 {
clear: both;
position: relative;
color: #000;
margin-left: 83px;
background: url(http://i.stack.imgur.com/2eRq2.png) 0px 16px repeat-x;
font-size: 1.5em;
float: left;
padding: 0px 0px 10px 0px;
height: 27px;
}
I've managed to make the left end stay always in line by:
setting all elements' height to the same value (I used 62px)
setting background-repeat: no-repeat and background-position: center on both ends
adjusting other values (padding etc)
fiddle: http://jsfiddle.net/ecpv2kv0/
The right end is sill like 0.5px out of line, but probably editing png images to have even height value (right now it's 31px) might help here.
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.
I am trying to figure out why the box in this fiddler has so much padding above and below the text.
http://jsfiddle.net/fZ6d7/1/
CODE
<style>
.simplebox {
padding: 6px;
background: #eee;
border-radius: 8px;
border: 1px solid #ddd;
box-shadow: 0 1px 1px #fff inset, 0 -1px 0px #ccc inset;
}
.simplebox-content {
box-shadow: 0 1px 1px #ddd inset;
border: 1px solid #cccccc;
border-radius: 5px;
background: #fff;
padding: 0 8px;
}
</style>
<div class="simplebox" data-editurl="/TextualReporting/ShowProgressEditor?itemId=5d205a60-64de-4717-ac1d-9db00189db74" style="">
<div class="simplebox-content">
<p>This is a test. This text has too much padding above and below.</p>
</div>
</div>
Any insight?
Your issue is the default padding and margin! You can use this basic universal reset to remove all default padding and margin for all of your html elements:
* { padding: 0; margin 0;}
Add it to the very top of your css stylesheet, that way nothing will have padding unless you specify it. So your <p></p> (or any others) wont have that pesky default margin.
Using some form of resets is a front end best practice. Interested in more advanced resets? Check out normalize.css.
Example in a fiddle: http://jsfiddle.net/agconti/SLjV2/2/
Paragraph <p> has got margin by default :-)
This is due to the <p> tag which has some margin as a standard. To remove it merely add
p {
margin: 0px;
}
to your css... or alternatively use another tag.
I am having difficulty in aligning an image next to a text box. I was wondering if there is an easy way to do it other than setting padding and margin. because those measures can vary in each browsers. I have made a fiddle http://jsfiddle.net/wD5T9/
<div id='searchWrapper'>
<input id='searchBox' style='width:250px; border:1px solid #cccccc; border-radius:7px 7px 7px 7px; padding:5px 28px 5px 10px; margin-top:14px; margin-left:50px;height:18px;' type='text' placeholder='Search'/><img src='http://www.q-park.ie/Portals/8/images/search-icon.png'/>
</div>
Just add to the CSS:
#searchWrapper img {
vertical-align: middle;
}
Whenever I try to position something very delicately, I chose to use this sort of method:
position:relative;
and then I define by using top, left, right and buttom.
http://jsfiddle.net/wD5T9/5/
Hope this helps