Currently, all the <p> elements on my page are being displayed like this:
First
Second
And so on...
I want there to be no margins between each p element.
You can change it by modifying CSS:
p {
margin: 0px;
}
Related
Firstly, i'm new to both HTML and css, so don't be too hash. I have a large header div that I wish to place it flush at the top of the screen, however, there appears to be space of about 10px which I can't remove.
HTML
<div class="wrapper"></div>
CSS
.wrapper{width:300px; background-color: red; height: 300px; margin: 0; padding: 0;}
If you're new to CSS and stuff,
you need to know that the browser applies styles to elements by default.
Like for example to Headings the font-size and font-weight,
to context elements like i, b, span other properties like display inline,
and to DIV elements the display:block; etc...
if you take a look at THIS LIST you'll see that 8px are added to the body element.
If you're happy with the styles the browser adds by default to your elements than all you need is
body{
margin:0; /* to remove the 8px default */
}
otherwise if you're not happy at all, and you wish to have full control over the styles being applied to your elements you can use an Ugly Reset (for margin and padding urgency) using the Universal Selector *
*{ margin:0; padding:0; } /* Global reset. "*" is to target all elements. */
or Google for some Stylesheet Reset code like from: http://www.cssreset.com/
that will help you to control/reset the most of all other elements default styles.
You need to add that to the body as well. The DIV is inside the BODY.
Try setting
margin: 0;
padding: 0;
To the body and the html elements
I have a problem thats kinda driving me nuts. I have an article container and within are several paragraphs. The first paragraph contains a drop cap. This first paragraph does not use text-indent, however every following paragraph does.
When I begin a new paragraph following a h3-header, I don't want any text-indent. Fine, I can get this to work (blue text in example).
My problem is this, when I begin a new paragraph with a header (strong followed by a break), this line will use the text-indent of the paragraph, and I don't want it to. I must have the strong tags inside the paragraph (as one should), not outside.
I'm thinking of a way to select all paragraphs that start with a strong tag. I don't want to use any javascript to solve this. I want to change the text-indent of the paragraph, not the position of the strong text.
I've made a jsFiddle here. I have tried something like this:
p>strong {
color:#f0f;
text-indent: 0 !important;
}
You can add a negative margin to the strong tag, though I assume you'll want a specific class on it.
strong.subhead {
margin-left: -3em;
}
Working example at: http://jsfiddle.net/J5C86/2/
However, this is also assuming you don't want the paragraph associated with the strong tag indented. If you're looking for the paragraph under the subheading to be indented as well, you'll need another tag on the first word or letter after the br.
span.subhead-indent {
margin-left: 3em;
}
Example: http://jsfiddle.net/J5C86/4/
To expand on my comment on your question:
If there's a reason you can't use <h4> - which would be the more suitable tag here - you can simply add a negative margin to your <strong> element:
p > strong:first-child {
margin-left:-3em;
}
JSFiddle example.
Otherwise, use <h4> instead:
<h4>Strong sub header</h4>
<p>Aliquam semper placerat urna...</p>
h3+p, h4+p {
text-indent:0;
margin-top: 0;
padding-top: 0;
}
h3+p {
color:#00f;
}
JSFiddle example with <h4>.
It works for me. Use this:
p>strong {
text-indent: 0 !important;
color: #f0f;
display: block;
}
After doing this, Remove the br tag at the last of p>strong.
Demo
I saw your problem and found that you have not included your paragraph within the h3 tag, so define your css with your strong paragraph with a class for eg.
<p class="no-indent"><strong>Strong Sub Header</strong></p>
define your css this must work.
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;
}
I have several paragraphs that I would like to indent, although only the first lines of these paragraphs.
How would I target just the first lines using CSS or HTML?
Use the text-indent property.
p {
text-indent: 30px;
}
jsFiddle.
In addition to text-indent, you can use the :first-line selector if you wish to apply additional styles.
p:first-line {
color:red;
}
p {
text-indent:40px;
}
http://jsfiddle.net/Madmartigan/d4aCA/1/
Very simple using css:
p {
text-indent:10px;
}
Will create an indentation of 10 pixels in every paragraph.
Others have mentioned the best way to implement this via CSS, however if you need a quick fix with inline formatting, simply use the following code:
<p style="text-indent: 40px">This text is indented.</p>
Source: https://www.computerhope.com/issues/ch001034.htm
I was also having a problem getting the first line of a paragraph (only the first line) to indent and was trying the following code:
p::first-line { text-indent: 30px; }
This did not work. So, I created a class in my CSS and used it in my html as follows:
in CSS:
.indent { text-indent: 30px; }
in html:
<p class="indent"> paragraph text </p>
This worked like a charm. I still don't know why the first code example did not work and I did make sure that the text was not aligned.
Here you go:
p:first-line {
text-indent:30px;
}
Didn't see a clear answer for a CSS newbie, so here's an easy one.
first indent all lines (1), than outdent the first line (2)
padding-left: 0.4em /* (1) */
text-indent: -0.4em /* (2) */
I ran into the same issue only I had multiple <p> tags I had to work with. Using the "text-indent" property wanted to indent ALL of the <p> tags and that's not what I wanted.
I wanted to add a fancy quote image to a list of testimonials, with the css background based image at the very beginning of each quote and the text sitting to the right of the image. Since text-indent was causing all subsequent paragraphs to indent, not just the very first paragraph, I had to do a bit of a workaround. The same method applies if you aren't looking to do an image though.
I accomplished this by first adding an empty div to the beginning of the paragraph I wanted indented. Next I applied a small width and height to it to create the invisible box and finally applied a left float to make it flow inline with the text. If you are using this for an image, make sure to add a margin to the right or make your width a bit wider for some white space.
Here's an example with the CSS inline. You can easily just create a class and add it to your CSS file:
<div style="height: 25px; width: 25px; float: left;"></div>
<p>First Paragraph</p>
<p>Second Paragraph</p>
I want to style my <BR> elements to have margins more like <P> elements. How can I do that?
Like this:
br {
margin-bottom: 1em;
}
You can use line-height. You have to have two <br />, first to break line and second to add range between lines.
You can specify any style to almost any element using CSS.
Default margin for P element is 1em 0; So, your CSS code should look like this:
br {
margin: 1em 0;
}
If you need to see default or current style properties for any element, you can use Firefox with Firebug or Chome/Safari/Opera Developer Tools.
Not sure why boogyman's answer has -2, but that's correct. To do what you're asking, try
<p> </p>
That will break the line and still give you the margin.