Am I right by saying:
If everything works how it’s supposed to without adding a display property, then it doesn’t need one?
or would I be wrong in saying that?
After I made that change, now span style wouldn’t need a display block either, correct?
Without display blocks on either span or div.
1 Like
That is correct.
Thank you for telling me this.
Would [line-height] go in div style too, or does that stay in span?
Correct. Every tag has a set of defaults that get used if nothing is set to override them in your CSS. Those defaults come from the User Agent Stylesheet.
1 Like
A good way to demonstrate this is to create a page of HTML with no styling whatsoever. What you then see is exactly what the User Agent Stylesheet is set up to do with the elements you put in your page You can learn an awful lot about basic HTML from doing an exercise like that. I’d suggest including the following:
Headings
Paragraphs
Lists (numbered & bulleted)
Tables
Images
Hyperlinks
Blockquote
Div
Span
And a small form perhaps
1 Like
Either location is OK. If applied to the <div>, it will be inherited by the <span>. Again, the best location for certain properties depends on the context, so keep an open mind.
Like this: You said all font related properties in div.
<div style="width: 256px; height: 150px; cursor: pointer; text-align: center; background-color:#000000;border-radius: 50px; border: 5px solid #0059dd;line-height:114px;font-family: New Times Roman; font-size: 20px;color: #0059dd;">
<span style=" "> [ ENJOY THE MUSIC ] </span></div>
Yes, that works just as well as keeping them separate, in this situation.
Do you mean set up like this? You prefer this way better?
<div style="width: 256px; height: 150px; cursor: pointer; text-align: center; background-color:#000000;border-radius: 50px; border: 5px solid #0059dd;line-height:114px;font-family: New Times Roman; font-size: 20px;color: #0059dd;">
<span>[ ENJOY THE MUSIC ]</span>
Nah, I changed my mind, separate is better.
Why does text-align: center; belong in div, and not span? What makes it different?
A span is an inline element that is only as wide as its content. Aligning the content of a span to its center is not logical because the span is already hugging its contents.
Put an outline around a span and see this for yourself.
span {outline:1px solid magenta}
Then do the same with a block element like a paragraph or header and see that the block element extends to the full width of it’s parent container unless the p or header has a width assigned.
p {outline:1px solid magenta}
1 Like
line-height is usually associated with border, so I’ll put it with div style then.
Hmmm. I’ve never made that connection. Always though of line-height being associated with text.
2 Likes
In css"
It’s usually
}
.element {
background: green;
line-height: 10px;
height:20px;
color: white;
}
Right?
And here’s one with font-size: I guess either then.
html {
font-size: 16px;
line-height: normal;
}
If you look up the description of line-height, you will see that it is usually associated with text. But inline or inline-block elemets can also accept it. (remember the clicker-bar in your squares-thingy)
https://css-tricks.com/almanac/properties/l/line-height/
When one writes the shortcut font propety, the line-height is written immediately after the font-size.
2em/1.25
1 Like
Line-height doesn’t really have anything to do with border as such. Line-height is the height of the line which may or may not match the height of the element. Inline elements can have a large line-height but their borders won’t match the line-height.
The inline box model is a thing of utter complexity and few understand it completely.
Generally though you would set line-height on a wrapper (block element) as you would like it to affect all the content inside similarly. Using a unitless line-height (e.g. line-height:1.5) is a best practice because it passes a scaling value to children who may have a different font-size and require more/less spacing.
3 Likes