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.
Related
I don't get it. Why is there so much space between "title" and "text"? Please take a look at this code:
<h3 style="background:#000">Title</h3>
<p class="d" style="background:#000">
Text Text Text Text Text Text Text Text Text Text Text
</p>
There are absolutely no other styles applied to those two elements, but still, there are so much unused space. Anyone have an idea here?
The caption tags (<h1>, <h2>, ...) have a default padding and margin applied to them.
The same is for the paragraph <p>
If you want to remove those default spacing add the following style to the captions and paragraphs inside your css or element:
padding: 0; margin: 0;
try to give margin:0 for h3 and p
Css Resets should usually be applied to CSS code so that your styling is only affected by what you put in, not default styling. http://www.cssreset.com/ contains some nice resets you may choose to use. This occurs as default margins set on headings are showed, a simple style of:
h3 {
padding:0;
margin:0;
}
Would resolve for this specific element only, thus the css resets come in handy for resetting all HTML elements to be without style.
You have to use reset.css to eliminate the default margin and padding.
meyerweb's reset css can be a good start.
It's because <p> is a paragraph. And by default paragraph has margin-top: 1em; and margin-bottom: 1em;. <h1> - <h6> is a heading tags, and by default it has margin-top and margin-bottom from 2.33em to 0.67em
How can I remove the line-breaks before and after the <p> element? I tried to use span instead of <p>. But what I wanted was a box with a height larger than the text I supply inside it with a particular background color. With span, I think this is not possible. If it is possible, or if there are any other suggestions, please help me.
p {
display: inline-block;
}
this should help
This works for me:
p {
margin: 0;
}
It removes both space above and under element.
I have a few classes that adjust font sizing:
.text-tall {
font-size: 1.5em;
}
.text-small {
font-size: .8em;
}
When I apply the class to a paragraph element
<p class="text-tall">Some text goes here.</p>
the styling work as expected. When I apply it to a span element
<p><span class="text-tall">Some text goes here.</span></p>
the adjusted font-size is applied to all text below the element on the page, sometimes resulting in progressively larger and larger text.
The obvious solution would be to simply always apply the class to the paragraph element, but my paragraph bottom margin is relatively sized (margin-bottom: 1.5em), so doing that increases the margin, too, which is something I don't want to do.
This only seems to be a problem in IE8 and lower. Any suggestions would be appreciated!
Thanks for the tips, everyone. Turns out a function in my functions.php file (in WordPress) was removing the ending </span> tags.
Try specifying the text-tall div with the span in the CSS. For example, you could do this:
.text-tall span {
font-size: 1.5em;
}
You may also be able to do the same thing with the text-small.
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;
}
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>