I have 2 consecutive paragraphs in an html email. I need to have no space between the 2 paragraphs, but I need 30px of space at the top of the 1st para and at the bottom of the second paragraph.
I can remove the spaces between the 2 paragraphs using:
p{
padding:0;
margin:0;
}
For the space at the top & bottom of the para , I can use
p{
margin-top: 30px;
margin-bottom: 30px;
}
All this works fine for outlook and browsers. But when I use it for entourage (MAC email) / gmail, the space between the paragraphs is still retained.
How can I get rid of the space?
Most web-based email clients (hotmal, gmail) will NOT honor styles defined inside a <style> tag simply because they just discard (almost) anything defined inside the head section. You should make your styles inline.
These are the rare cases where using inline css make sense
this should be in your css
p{
padding:0;
margin:0;
}
and in your inline
style='margin-top: 30px;'
there are tricks in css to make it work but i am not sure if its supported in every browsers
you will have to google that.
example :
div:firstchild p {
... rules..
}
will select the first child
try this way:
<style type="text/css">
p{background-color:green;}
div+p { margin-top:30px; }
p+p{ margin-bottom :30px; }
</style>
<div align="center"></div>
<p> first paragraph </p>
<p>Second Paragraph </p>
Working DEMO
Reference :
adjacent sibling selector
You can pack your paras:
<div>
<p>top paragraph</p>
<p>bottom paragraph</p>
</div>
And add to your CSS:
div
{
padding: 30px 0;
}
Related
I want the header of a paragraph to be centered, but I can´t get it working.
The whole and the paragraph have the property text-align:left and the header has text-align:center but still it´s not centered.
body{
text-align:center;
}
main{
text-align:left;
}
b{
text-align:center !important;
}
<main>
<b>Header:</b>
</main>
Can somone give me some advice what I´m doing wrong or missing?
Put a div around it. The <b> tag cannot be centered.
body {
text-align: center;
}
main {
text-align: left;
}
.header {
text-align: center !important;
}
<main>
<div class="header">
<b>Header:</b>
</div>
</main>
A <b> element is display: inline by default.
The text-align property says: Applies to: block containers.
It therefore has no effect on a <b> element by default.
You need to apply it to a block container instead. There are three ways to do this:
Find (or add) an ancestor element which is a block container
Change the <b> (using the CSS display property) so that it is a block
Replace the <b> with a different element which is a block.
In this case, the apropriate thing to do is to replace the <b>.
You should select markup based that describes what content is and not how it should look. (This has been true since CSS 1 was released in 1996 and began the process of separating style from structure in webpages).
You have been calling the element "the header". HTML provides elements specifically for that purpose.
Aside from the <header> element itself, there are the <h1> - <h6> heading elements.
You content makes it look like an <h1> would be appropriate.
h1 {
text-align: center;
}
<main>
<h1>Header</h1>
</main>
You can also remove the !important flag. It is usually more trouble than it is worth and provides no benefit here.
header seems a better tag to group "introductory or navigational aids...heading elements but also other elements like a logo, a search form, and so on.", documentation at MDN.
main would be better suited for "content...unique to the document, excluding any content that is repeated across a set of documents such as sidebars, navigation links, copyright information, site logos, and search forms (unless the document's main function is as a search form).", documentation at MDN.
To be clear, text-align property is inherited by child elements, documentation at MDN.
That said, consider the following code:
body{
text-align: center;
}
header{
text-align: left;
}
h1{
text-align: center;
}
<header>
<h1>Header:</h1>
<p>Content in a paragraph (should be left aligned, inheriting from `header`)</p>
</header>
A easy solution may be using positioning. Something like this:
body {
text-align:center;
position: relative;
}
main {
text-align:left;
}
b {
position: absolute;
left: 45%;
}
Another solution would be to just
display: block
the b element.
You can not align b tag content.
Just change in your jsfidle like this.
html
<main>
<p><b>Header:</b></p>
</main>
and css
p{
text-align:center !important;
}
The <p> is the default root element of content in most of WYSIWYG editors (I use tinymce) where <p> can not contain a block element according to this . When my content is only a single table there is a difference between page source and the rendered elements:
Source of page:
<div class="generalbox">
<p>
<table><tr><td>something</td></tr><table>
</p>
</div>
inspected Element (in both Chrome and Mozila Firefox):
<p></p>
<div class="generalbox">
<table><tr><td>something</td></tr><table>
</div>
<p></p>
This causes a white gap before and after the content. I used the following css rule to omit the gap effect but obviously no success:
.generalbox p:first-of-type {
margin-top:0;
}
.generalbox p:last-of-type {
margin-bottom:0;
}
How should I remove the gap effect? CSS or a server side code or something is WYSIWYG?
Use :empty selector to target those WYSIWYG's empty p elements:
p:empty {
margin: 0;
}
You can also combine with :not() to select not empty p elements:
p:not(:empty) { }
TinyMCE has an available plugin that allows you to edit the code of your output. Is that option available to you? If not, try this:
.generalbox {
margin-top: -10px;
}
.generalbox + p {
margin-bottom:0;
}
I need to style h1, h2, h3... and p tags inside a div but I only have access to the content area.
If it where possible, this would be what I'd use:
<div style="h1{padding:0;}p{font-size:1.4em;color:#000}">
Is there a solution to do this ? Apart from adding the style to every element.
Thanks
Although HTML syntax restricts style elements to the head part, this requirement is not enforced in practice. It works inside body, too. You just need to take into account that the effects are global to the document. Thus, to limit the effect to elements inside a certain element, you need to use suitable selectors. Example (I have added a color setting because the effect of just padding: 0 as in the question in not noticeable: it equals the default):
<h1>Heading outside the div</h1>
<p>A paragraph outside the div.</p>
<div class=mydiv>
<style>
.mydiv h1 { padding: 0; color: green; }
.mydiv p { font-size: 1.4em; color: #000; }
</style>
<h1>Heading inside the div</h1>
<p>A paragraph inside the div.</p>
</div>
There isn't a good solution.
Style elements may only appear in the head.
Inline style only applies to the element the attribute appears on.
The closest you can come is to use JavaScript to dynamically modify the stylesheet.
You would be better fixing whatever problem is preventing you from modifying the head section.
To avoid unwanted changes inside divs i will be using to divs with 2 unique id's:red and green
If you want different style for specific divs:
<div id="red"><h1>red</h1><p>red</p>
<div id="green"><h1>green</h1><p>green</p>
body #red > h1,body #red >p{
color:red;
}
body #green > h1,body #green > p{
color:green;
}
I realize the question has been asked several times over, but frankly I didn't manage to find an actual answer in any of the instances.
Whatever I try I cannot get rid of the spaces between divs? here is a simplified version of the problem, and a jsfiddle: http://jsfiddle.net/hhLopqwm/1/ . Any ideas? How can I make the divs connect?
<div class="top">
so what <br><br> is going on here
</div>
<div id="work">
<h2>no margins control this space between divs</h2>
<h4>it's like magic or something</h4>
</div>
<div class="red">
any clue what should I do?
</div>
Heading elements (in your example <h2> and <h4>) have margins too which push the parent divs apart:
div, h2, h4 {
margin:0;
padding:0;
}
html {
margin: 0;
padding: 0;
}
.top {
background-color:yellow;
text-align: center;
margin: 0;
padding:0;
}
#work {
background-color:green;
margin:0;
padding:0;
text-align: center;
}
div, h2, h4 {
margin:0;
padding:0;
}
.red {
text-align: center;
background-color:red;
}
<div class="top">so what the hell
<br>
<br>is going on here</div>
<div id="work">
<h2>no margins control this space between divs</h2>
<h4>it's like magic or something</h4>
</div>
<div class="red">any clue what should I do?</div>
Check this link:
How to remove the gap between div in html?
Use
* {
padding: 0px;
margin: 0px
}
at the top of your CSS
H2, H4 {margin: 0;} will fix it, as mentioned previously its the margin on those.
You could also use padding to push the div out the appropriate amount, or a min-height to resolve the issue.
Personnally I would probably just remove the margin from all H1/2/3/4/5/6.
I wouldnt even use a reset since typically this adds more CSS than its worth.
My standard reset would be html, body, H1, h2, h3, h4, h5 {margin:0; padding:0;}
Please DO NOT use: * {margin: 0; padding 0;}
This is generally bad practice and can and will break some forms etc, google it if you want further information.
Heres some of the cons:
http://www.cssreset.com/scripts/universal-selector-css-reset/
•No control over exactly which elements are reset – every element used in the document must now have its margin and padding set explicity, plus any other properties such as border and outline that may be included in the reset (see the extended version below).
•Wave goodbye to inheritance of CSS rules from parent to child elements – the universal selector wins out every time (see note on inheritance, below). So not only must every element be defined after the reset, but child elements now cannot inherit each element’s properties, and so they must also be explicitly defined. The amount of code this requires may even negate the size-savings from the minimal CSS Reset!
•According to the universal declaration, a browser must run through every element on the page and apply the universal rule: elements, their children and great-great-great-grandchildren all alike, and some claim that this may be a huge hit on resources and page load times (this point is debatable for modern browsers.)
•Also – and this might be the deal-breaker for many – Internet Explorer 6 and 7 don’t support the universal selector.
I cannot seem to figure out how to get the space between each element to disappear. I mainly want to remove the white space on top. I have tried using margin-top:0 and it didn't work. Any advice would be greatly appreciated.
This is my html
<body>
<div style="background-color:green;">
<h1>top</h1>
</div>
<div style="background-color:blue;">
<h1>body</h1>
</div>
<div style="background-color:red;">
<h1>footer</h1>
</div>
</body>
This is my css
body, div, header {
padding:0;
margin:0;
margin-top:0px;
}
The space is caused by the User Agent Stylesheet (the default styles applied by your browser).
You need to target the H1 also.
html, body, div, h1 {
margin:0;
}
Alternately, rather than individually targetting each element, you can use the universal CSS selector * to target everything at the start:
* {
margin:0;
padding:0;
}
To avoid trouble, you should start your CSS with a CSS reset. This sets all padding, margins etc on all elements to ensure browsers interpret your styles from the same starting point rather than relying on each browser's individual user agent stylesheet.
If you want to go modern, you can use Normalise.css
Include h1 on your CSS:
Fiddle
body, div, header, h1 {
padding:0;
margin:0;
margin-top:0px;
}