When I add the 36px "Announcement" text to the <div> below, it adds a ton of padding around just the text that is 36px and I cannot get rid of it. I did some research and tried changing the padding of the <div> and the <body> in my stylesheet, but that did not get rid of the padding. Can somebody please explain how to remove the excess padding that is around just the 36px text?
<div style="float:right; width:697px; height:90px; position:relative; top:-50px;">
<p style="text-align:center; font-size:36px;">Announcements</p>
<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget.</p>
</div>
Try to explicitely set the line-height CSS attribute, also make sure you set margin to 0.
Related
I am trying to apply absolute/relative position to an image inside an email. There's an image inside a span which needs absolute positioning to preserve line height of the paragraph.
Here's an image of what I'm trying to accomplish.
I got to know absolute and relative positioning can't be used inside email templates, is it possible to fix the image positioning without using absolute positioning.
The position CSS property has very poor support in email clients, even the ones considered to have decent CSS support.
You're best bet is to try negating the image's line-height, something like this:
<p style="margin: 0 0 10px; line-height: 130%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam dictum varius. Integer mollis, elit nec commodo elementum, justo nunc faucibus lectus. <img src="" style="display: inline; mso-line-height-rule:exactly; line-height: 0;">
Line heights vary depending on the font and email clients tends to treat line-height a little differently. This isn't perfect, but it'll get you closer to your screenshot above.
This actually has a code entity:
U+026A0 UNICODE
⚠ HEX CODE
⚠ HTML CODE
which you could then just style inline with more code:
<p>Lorem Ipsum dolor sic met <strong style="color: #fff126">⚠</strong></p>
Snippet:
<p>Lorem Ipsum dolor sic met <strong style="color: #fff126; back">⚠</strong></p>
The thing with using position: absolute in html emails is that they will 100% break on Outlook.
I would like to set the space between span lines to 15px but it doesn't work when i'm using line-height and i measuring the space with chrome extension the space it's not equal to 15px.
<div class="test">
<span style="line-height:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</span>
</div>
result:
enter image description here
Is this what you were looking for. I have added a p element so CSS would recognize this block of text.
<div class="test">
<span>
<p style="line-height:25px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</p>
</span>
</div>
Your code seems to be working. Remember that line-height doesn't affect the font-size but the effective spacing before and after the text (which is why the DOM viewer in chrome shows that the height hasn't changed).
Here is a snippet to highlight what is going on.
.test {
background-color: blue;
}
.test > span {
line-height: 125px;
color: white;
}
<div class="test">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</span>
</div>
your code is working . you just probably are measure wrong.
<div class="test" style='width:50px'>
<span style="line-height:1; font-size:15px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</span>
</div>
line-height will take values without units as a multiple of the font size.
it is the space each line takes .
Line boxes "belong" to the containing block element - in your case the .test element, and inline elements like your span are broken into multiple inline boxes across the line breaks and the parts are then fitted into the line boxes.
So on each line of the .test element, there's a zero-width inline box called a strut and a part of the span. The span has a line-height of 15px, but the strut has a line-height determined by the .test element.
Since you're not change the font family, or font sizes, or vertical alignments, the distance from the top of one line to the next is simply the maximum of the line height of the strut and the line height of the span.
The default font size, font-family, and line-heights will give a line height of the strut to be around 18 to 19 pixels, hence why you are seeing bigger gaps than you expect.
So to reduce the space between the lines, reduce the strut's line-height as well as the span's line-height, which you do by setting the line-height for the containing block. The span element can then just inherit it. i.e. Use:
body { width:200px; } /* for demo to make multiple lines */
.test {
line-height: 15px;
}
<div class="test">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</span>
</div>
im stuck again with "basics", anyway, I'm having trouble making this example :
Basicly I want icon and "Feature 1" to be aligned on top and centered as seen on picture (the cyan lines) and then below them a random paragraph.
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="top-align text-center">
<i class="fa fa-paper-plane-o"></i>
<h3>We're Creative</h3>
</div>
<p class="text-center">Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</body>
CSS3
.top-align{
display:inline;
}
So, my idea here was to make icon and "Feature 1" paragraph be "inline" so i made custom css and separate div tag for these 2 things (icon and paragraph), but unfortunately it wont work, here's live version if anyone is interested
http://i1cevic.com
I noticed you are using Bootstrap and Font Awesome, so my fiddle reflects that.
https://jsfiddle.net/Vuice/Ljkoatog/
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-center">
<i class="fa fa-paper-plane-o"></i>
<h3 style="display:inline;">We're Creative</h3>
</div>
<p class="text-center">Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet<br>
Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</body>
Your wrapper div does not need display: inline. An inline element will render as if it is a letter in a word - each character is an inline element. A <span> defaults to display: inline - it takes up the next available space on the line.
Once the wrapper div.top-align has display: inline removed, give the h3 a display property of inline or inline-block. Either will do. This will allow the icon and h3 to act like two adjacent words and they will respond to the text-align: center applied by the wrapper div.
Even better, you can accomplish this without a wrapper div around the icon + h3. The icon defaults to a display of inline-block. Put that icon's span inside the h3 and it will always render as a single unit, just like the icon was a word in the h3. Since the icon is wrapped in a span, you can still target it individually if you need to.
Here's a fiddle illustrating how:
Making your icon an integral part of your heading
(I started with your code and commented out what no longer applies so you can see the progression.)
i have paragraphs with text and a div what say something like "more" like this:
<div>
<p>
Lorem ipsum dolor sit ametm.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
</p>
<div class="extra">more</div>
</div>
I need to place the extra div right behind the end of the last word in the paragraph, on the same line.
like this: this is the end of p - more
It seems to be easy to do this with a p:after selector but i cant use this because i need to work with the "extra" div in jquery.
And I need to have the paragraph using display or display-inline.
Do somebody has a tip?
thanks alot!
edit: I need to have the extra-div next to - not wrapped in - the p
thats is the problem
and i tried to use span and inside-block but without any luck
Try this:
<div>
<p>Lorem ipsum dolor sit ametm.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
<span class="extra">more</span>
</p>
</div>
Can you use display: inline-block on the div?
That lets the element have width, height (and other box properties like padding), but behave like a character in a paragraph when it comes to positioning.
Oh also, you probably have to place the div within the last paragraph since otherwise, the paragraph will push it down - the paragraph has its own box in the page.
i cant wrap the span inside the p because the p is coming from a wordpress loop.
at the end i used jquery to append the span at the end of the last p.
$(document).ready(function() {
$('.extra_available p:last-of-type').append(' <span class="extra"> extra </span>');
});
thanks alot!
I have a padded DIV (containing other/sub-DIVs and a DL) followed by some text:
<div> # the padded/main div
<div>
<div>
</div>
</div>
<div>
<dl>
<dt></dt><dd></dd>
<dt></dt><dd></dd>
</dl>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus ante dui, et venenatis enim. Aliquam in massa...
How come there appears no padding at the bottom of the main DIV?
(There is no padding space between the main div's content and the following text.)
Thanks for any help with this!
Tom
You are confusing padding with margin. margin is the property that would define space between the main div and the bottom text.
In your example, it appears that you are trying to use a newline to cause spaceing within html. This will not work. As stated in previous answers, you must set the css margin-bottom property to cause spaec to appear after the bootom of a div and the start of the next HTML element
If you want to use padding and not margin then change to add some way to identify the outer div (I used an ID):
<div id="outerdiv"> # the padded/main div
<div>
<div>
</div>
</div>
<div>
<dl>
<dt></dt><dd></dd>
<dt></dt><dd></dd>
</dl>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus ante dui, et venenatis enim. Aliquam in massa...
and add CSS such as:
#outerdiv
{
padding-top: 1em;
padding-bottom: 1em;
}
EDIT: see it a work here: http://jsfiddle.net/yvaPG/
Thanks for your quick hints!
I was finally able to track the problem down:
The
<dd></dd>
element had a "float:left;". This apparently caused the following text to move "left/up".
My solution:
I inserted an empty
<div></div>
with a "clear:both;" between the dd element and the following text.
If anybody has a more elegant solution, I'd still be interested!
Tom a more reasonable approach would have been to define a seperate CSS class of;
.clearfix {clear:both; display:block;}
This would then allow you to call this div should you require it in other places throughout the page. Simply replace the with to ensure this change continues throughout and isn't reset by the removal of a CSS reset throughout the rest of the page/setup
Regards