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.
Related
It looks like the text-indent for div is 0px ( which is the default body text-ident size), but why it is inheriting body element? why it is not inheriting P element who is the parent of div, setting text-indent to 32px?
p {
text-indent: 32px;
}
div {
text-indent: inherit;
}
<p>In my younger, he told me, ,
<div>'just remember that all the people in this world haven't had the advantages thatyou've had.'</div>
</p>
You cannot insert "div" tag inside "p" tag that is not valid in html. but you can insert "p" tag inside "div" tag. If you want the child element to inherit the "p" element property just change the "div" to "p".
The text-indent property specifies the indentation of the first line in a text-block and no all lines.
read more : https://www.w3schools.com/cssref/pr_text_text-indent.asp
Syntactically, a div inside a p is invalid in all standards of HTML.
read More : Nesting block level elements inside the <p> tag... right or wrong?
you can use span instead of div.
Like this :
p {
margin-left: 32px;
}
<p>In my younger, he told me,<br><br>
<span>'just remember that all the people in this world haven't had the advantages thatyou've had.'</span>
</p>
If you want use div Insistence,use margin-left for indent.
p {
text-indent: 32px;
}
div {
margin-left: 32px;
}
<p>In my younger, he told me,
<div>'just remember that all the people in this world haven't had the advantages thatyou've had.'</div>
</p>
Use <span> instead of <div>
You cannot insert <div> tag inside <p> that is not valid in html.
<p>In my younger, he told me, ,
<span>'just remember that all the people in this world haven't had the advantages that you've had.'</span>
</p>
Hope this will help you
Here is your answer as per your comment,
why I can't put a div inside a p?
Because <p> is a block level element, and it is used for displaying text, it won't allow any other block level elements inside it,
but you can use inline elements like <span> and <strong>
As far as I know, p tags create paragraphs. But I often find HTML code where these tags are used for other aims. For example, I found it in a Codecademy exercise:
<div><p>Rex</p></div>
div {
position: relative;
display: inline-block;
height: 100px;
width: 100px;
border-radius: 100%;
border: 2px solid black;
margin-left: 5px;
margin-top: 5px;
text-align: center;
}
div p {
position: relative;
margin-top: 40px;
font-size: 12px;
}
It creates a circle with the name Rex in the center of this circle: http://jsfiddle.net/cvT6E. But the word Rex isn't a paragraph, it's just a word!
When I try to replace p tags by span (it seems more logical for me), it doesn't work: http://jsfiddle.net/cvT6E/2/. Why not?
Finally, I would like to know:
1) Is the use of p tags semantically correct in the example?
2) Why isn't the word centred when p tags are replaced by span tags?
At first, recall that <p> is a block-level element. Mozilla puts it nicely "Their most significant characteristic is that they typically are formatted with a line break before and after the element (thereby creating a stand-alone block of content). That is, they take up the width of the containers." This explains why there <p> centers and span doesn't.
Furthermore, <p> is meant for paragraphs, so it is more appropriate for representing textual content, hence the semantic is preserved, as you might recognize too. I would suggest using <span> for situations where you do not have a semantic markup available in HTML, and in your case, representing a word or block of text with <span> is not insisted.
Appreciate that you might approach this with a different mindset, although I wouldn't recommend complicating things unless necessary. Observe the markup as stated below.
<p><span>text</span></p>
This would essentially give you the same effect i.e. centering of the "Rex" word in the circle, because <p> is a block-level element, and it can act as a container for the <span> element. Hence, the <span> would effectively inherit the properties of <p>
.This is evident from the fact that the text is vertically centered.
The <span> is on the contrary an inline-element, and think of it as a grouper, tying up elements together. Meanwhile, a <div> is an ideal container. Personally, I use <span> when I can't find an appropriate markup element and when I wan't no special properties of <p> or others. I like <span> for it's pureness.
If you strictly want to use <span> and center "Rex" in that circle, you can do this. The last two properties essentially enable you to do just that and the output is shown in the image below.
div span {
position: relative;
margin-top: 40px;
font-size: 12px;
display:inline-block;
vertical-align:middle
}
p is often used for displaying paragraphs, but it can also be used for many other things due to its default properties. In this case, span will not work because span has default display:inline.
Question 1 is primarily opinion-based, and the answers have no practical implications.
Question 2 has a simple answer: a span element is by definition an inline element (with display: inline), and the text-align property thus does not apply to it (i.e., has no impact on its rendering). You can fix this e.g. by using div instead of span or by using span with the CSS declaration display: block.
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.
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>