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>
Related
I'm having a very strange problem. I'm simply trying to use Ids and Classes to edit my HTML with CSS and for some reason it's not being recognized. Here is the HTML I've used.
<p class="Benefits" ><center>Benefits of First Person Shooters</center></p>
Here is the CSS
.Benefits {
font-size: 60px;
}
Id's won't respond either.
Putting center tag inside a paragraph creates invalid markup which browsers try to fix. Also:
The 'center' tag is not supported in HTML5. Use CSS instead.
.Benefits {
font-size: 60px;
text-align: center;
}
<p class="Benefits">Benefits of First Person Shooters</p>
Added center selector has the same font-size as Benefits class
.Benefits, center {
font-size: 60px;
}
<p class="Benefits" ><center>Benefits of First Person Shooters</center></p>
If you inspect the HTML, you'll notice that the center tag is placed OUTSIDE of your paragraph. Add the class/id to the center tag rather than the paragraph, or use CSS to center the text rather than having a center tag.
Because it's within the "center" element. Put your class within "center".
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.
Both of the following codes seem to work properly to style the span element:
<style>
div p span {
font: 18px arial;
color: red;
}
</style>
<div>
<p>
<span>
Hello, world!
</span>
</p>
</div>
<style>
div span {
font: 18px arial;
color: red;
}
</style>
<div>
<p>
<span>
Hello, world!
</span>
</p>
</div>
But I'm not sure if the second one is the right coding and if there's a difference between them, for example regarding browser support.
Neither of them is a “subchild selector”; there is no such concept in CSS. They are different descendant selectors, or descendant combinators as they are called in the Selectors Level 3 specification. Their meanings are different, so it depends on the purpose which one is better.
The selector div span matches any span element that is a descendant of a div element. The selector div p span matches any span element that is a descendant of a p element that is a descendant of a div element. Both selectors are rather theoretical as such; they are hardly useful in practical situations without some additional components such as class selectors.
They both work because the elements selected by div p span are a subset of the ones selected by div span.
If you include a <span> as a child of the <div>, the second one will select it, but the first one will not. If you don't include a <span> as a child of the <div>, they will select exactly the same elements.
For example:
<div>
<span>Only the second selector will make this text red</span>
<p>
<span>Hello, world!</span>
</p>
</div>
Well, it really depends on the context. For example, this selector...
div p span
will only apply to all span elements that are children of a p element which in turn, are children of a div element. Consider, this html...
<div>
<span class="title">Title</span>
<span class="desc">Description</span>
<p>
<span>Content</span>
<p>
</div>
the following css declaration will color the content span in blue
div p span
{
color:Blue;
}
however the style is not applied to the title and the description because they are not children of a p element. Now by using this css declaration...
div span
{
color:Blue;
}
will cause both the title, description and the content to be coloured in blue because this selector targets all span elements that are nested within a div element
As for performance, that's hard to determine because it all depends on implementation and how well different browsers traverse through a DOM hierarchy and apply the style. But, I'd guess that the more specific you can be the better so that the HTML parser can target elements directly. With that in mind, this css selector...
div p span
should perform faster than
div span
because it will cause the rendering engine to look for all div element, then p elements ignoring all other elements (including span elements that are direct children) and finally it'll look for span elements
both of them will work but
div p span {
font: 18px arial;
color: red;
}
is more correct, and you are less likely to have problems like when you decide to add a span in an li for some other possible purpose.
div > p > span {
font: 18px arial;
color: red;
}
First method is correct way.The styles work only span that inside of the p tag and you can give/edit/change specific styles on this item ...but the second method's style work all span inside of div tag..
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'm trying to set a margin-top of 20px to all my paragraph elements excepting the first one. I've this code:
<div>
<h3>Title</h3>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</div>
And this is my CSS:
div p{
margin-top: 20px;
}
div p:first-child{
margin-top: 0;
}
But this isn't working... I think it's because of the , but I can't figure out how to fix it... I'm sure you can help me out!
I apologize if I messed up with my english, I hope I made myself clear!
Thanks!!!
To set a margin-top of 20px to all paragraph elements in a sequence of such elements excepting the first one, use
p + p { margin-top: 20px; }
If you additionally wish to set the margin top of the first p element in a sequence to zero, as it seems, just add
p { margin-top: 0; }
The rule with a more specific selector will override this for any element except the first one in a sequence.
The selector div p:first-child does not work, because it matches a p element that is the first child of its parent and a descendant of a div element. In your example, no p element is the first child of its parent.
p in your example isn't first child, h3 is. Go with:
div h3 + p {
margin-top: 0;
}
Demo: http://jsfiddle.net/fSZWU/
The pseudo-class :first-child doesn't indicate the first element of that type which is child of its parent. It rather means the first child element of its parent.
I remember being confused at first as well, because I was expecting :first-child = first. The solution proposed by #yabol (h3 + p) will get you the paragraph next to the h3, which, in your case, is the first <p>; but be careful because by changing the structure of your page you might lose that particular style.
To achieve exactly what you are looking for, you have to use the CSS3 pseudo class :first-of-type. Be careful though with the support (only IE9+!)
Try it out yourself!