I want apply margin property for my html newsletter
But Gmail ignores this CSS property
Is there any way to add margin to html element ?
Thanks
With HTML email you need to go back to the dark ages and use tables. Sad but true.
Rock Solid HTML Emails will help you.
Tables are the best things you can use for newsletters. Also remember that if are you using CSS it's better if you do it inline. In other words, like this:
<table style="margin: 0 0 15px 50px; color: #FFFFFF;"></table>
Do not have CSS in the header.
Yes #Alex is right when he says use in-line CSS. One thing though, No CSS shorthand is used: instead of using the abbreviated style rule margin:0 0 15px 50px use margin-top:0; margin-right:0; margin-bottom:15px; margin-left:50px;
Check http://www.sitepoint.com/code-html-email-newsletters/
As of 8/30/2022 Gmail supports the margin style property.
see https://developers.google.com/gmail/design/reference/supported_css
Related
I wonder how you would remove the space around text, I know this can be achieved by line-height. But space is always kept either above or below the text. Is there some dynamic way to do this? Either plain CSS or SASS works for me.
Thanks in advance :)
Your developer console tells you which property is responsible for the space.
In your case its the margin that is defined on the element. A simple
h1{
margin:0;
}
will fix this.
In case you wonder, where this margin comes from - some of the elements, like headings come with predefined margins & paddings that are applied by the browsers automatically. In this case, the source in the styles section of your webdev console states "user agent stylesheet".
write CSS
h1 {
margin: 0;
}
It will remove the default margin for h1 getting applied from browser.
Okay So I made a template with some CSS & HTML. However, if you look between the menubar, there's a bunch of white space. Also the content and sidebar are weird. If you look at the top there's a bunch of padding at the top but I didn't apply any padding anywhere! Help!
Link to site http://techtubecentral.com/demo/
Try this, Hope it will work
<style type="text/css">
ul{
margin:0px;
}
</style>
Padding and margin is specified by default. It is part of what was originally generated by the W3C consortium. All you need is a CSS Reset sheet.
http://www.cssreset.com/
You can attach this to your site as a separate file, for example reset.css. Or you can jsut copy paste the reset code to the top of your styles.css file.
Naveen's solution is correct b/c there is default margin coming from the browser's style sheet. Add
* {margin:0; padding:0;}
as the first line in your style sheet - it's a simple reset of these properties on all elements, and you will have no more trouble with "phantom" paddings and margins cascading down from the browser stylesheets.
When using a tag you will find that the browser will automatically adding a margin and sometimes padding that may not be needed.
Try adding margin: 0px; and padding: 0px; just as good practice.
I have a div that contains a link:
<div id="like_bar"></div>
With some CSS:
#like_bar{
width:140px;
height:26px;
background:url('bar.jpg');
}
#like{
display:block;
width:20px;
height:20px;
margin:3px 36px;
background:url('mini_img.png');
}
The link is placed at the top of the bar and the margins on the link are applied to the bar. This is annoying. Could someone explain these collapsing margins, how to avoid them and what they're used for.
There are many ways to "fix this".
Perhaps the easiest for you would be this:
#like_bar {
overflow: hidden
}
Other ways include:
Add some padding
Add a border (even border: 1px solid transparent is enough)
float the element
position: absolute
And, like in the snippet above, set overflow to a value other than the default of visible.
You also asked:
what they're used for
A common use case is the <p> tag.
See: http://jsfiddle.net/thirtydot/tPaTY/
Without margin collapsing, certain things would become annoying.
Because I'm lazy I'm just going to link to a few resources:
My answer here explains why the box model is the way it is, which is related to margin-collapsing being included.
The w3c css spec defines the behavior of margin collapsing. It's an expected behavior for convenience given the box model. You don't need to worry about double margins between blocks of content with it. What it sounds like you actually want is some padding around #like, rather than margins.
Think of CSS as a content-centric inside→out approach to styling, rather than a programmed outside→in approach.
I have a DIV container that is a CSS class defined on the top level. That container also has a style that has a couple elements that should override the main class elements. As far as I understand, this is what it should be doing, but it seems to ignore everything I am putting in there.
/* In the CSS file. */
div.ItemContainer {
position:absolute;
left:50px;
top:15px;
width:80px;
height:70px;
}
and In the HTML file:
<div class="ItemContainer" style="left:200px; top:150px;">
Test text.
</div>
Am I doing something wrong here? If not, any suggestions on how to get this to work? Thanks.
Sometimes things don't cascade correctly in some browsers. Use the !important flag to override behaviour.
style="left: 200px !important; top: 150px !important"
Your code seems to be alright. Have a look at the markup language you are using (HTML/XTML...) to see if it has an error such as a unclosed quotes, missing tag or missing end tag. Another thing that could mess up your style is the use of JavaScript for styling. It is a bad practice to use JavaScript for styling! Have a close look at what you are doing with the use of JavaScript for styling.
iScroll
Using iScroll seems to be the source of your problem. You might want to use a JavaScript library that does not mess with CSS. Also, you could try to modify the library or find a way to bypass what ever you are doing with the library.
You might find something useful in these links:
jQuery TOOLS
jQuery UI
try !important
left:200px !important;
Currently I have a list that has an H3 heading above it (which I can't really remove easily, it's auto generated by a cms) and looks something like this
Headline
|
|
List stuff
and I want to get rid of the pipes. They seem to be "built in" to the <h3> tag, anyone have any idea what CSS property of h3 would get rid of this?
H1, H2, and H3 tags all inherently have a margin and padding added to them by browsers.
You can test this by putting a background on the H1, H2, and H3 tags in css and looking in different browsers.
To remove the "pipe spacing" you should:
h3{
padding: 0px;
margin: 0px;
}
Then you can re-add whatever you would like since CSS is a one-way execution path. Consequent CSS values will overwrite base-level CSS.
Another option that removes the space below the text is as follows:
h3
{
display:inline;
}
Try setting the "border" style property on the H3 to
border:0;
It's possible that the "pipe" is actually a border on the headline, a border-right property, that you can modify or override.
Alternative: A true pipe that the CMS generates (I'm assuming you've checked the HTML source and this is not the case, but good to ask)
Can you select the text and see if it is a true pipe character, or rather just a visual element?
Other Alternative: Some kind of CSS content property. More rare, since most browsers don't support it.
In Addition to #Jonathan answer, You must add:
p{
padding: 0px;
margin: 0px;
}
That solved my problem.
If the pipes are actual text, you're not going to be able to get rid of them without using some form of JavaScript.
If the pipes are a background image for the H3, you can use this to get rid of them:
h3
{
background-image: none;
}
Set height according to your requirement along with font size and it will remove the padding if the height is lesser than the font size takes!