The <div style=" and the <span style=" are two different parts, is there a name that each is called?

HTML & CSS
103

The code is not semantically appropriate. It should use the <blockquote> tag .

The <p> tag should not be assigned {display:inline}. It should be left as block.

(1) What is it about <blockquote> that does not suit you?

(2) What is it about <p> as a block element that does not suit you?

2 Likes
104

Look, you see the difference between display:inline, and display nothing? The whole thing drops down.

105

Then assign {margin:0} to the paragraph with ā€œnothingā€.

Show me the fiddle.

106

Can I use one of these instead of display:inline, and if so, which one should I use?

or margin:0?

These work also.
display:initial;
display:unset;

initial
This keyword applies the initial value as defined in the CSS specifications. Sometimes this initial value makes sense (float: none), sometimes itā€™s there for historical reasons (background-repeat: repeat), and sometimes the spec writers made an essentially random-though-somewhat-defensible choice (color: black).

unset
This keyword applies the inherited value if the property is normally inherited (such as color), or the initial value if the property is normally not inherited (such as display).
http://www.quirksmode.org/css/cascading/values.html

107

Although useless CSS, you can use {display:block;}

I have never used the properties ā€œinitialā€ and ā€œunsetā€. I do not know how well supported they are. If well supported, then {display:initial} would be OK. But WHY use a display property at all?

108

This might be worth your time reviewing. Itā€™s the Webkit User Agent Stylesheet that Firefox uses. Scroll down and look at the default settings used for each HTML tag. <blockquote> is on line 58, but you can check out all of the other tags too. If any element doesnā€™t behave as you expect, then you override it in your CSS with something that suits what you are trying to achieve (?) with something more appropriate.

http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

If you are really interested in overriding things at a more fundamental level, then look into adding a ā€˜CSS Resetā€™ file, such as the one created by Eric Meyer - http://meyerweb.com/eric/tools/css/reset/

109

Please explain. curious :cat:

1 Like
110

^^ thisā€¦

111

Iā€™ll just use margin 0; I hadnā€™t known of that till you mentioned it.

112

Thatā€™s why I put descriptions of what they are and what they do.

113

And delete the display property. It is not appropriate and it is not needed. The paragraph text shoud be in a block element.

Perhaps if you told us WHY you want to use those unusual styles it would help us understand the structure that you have in mind. But without that context, I stand firmly behind removing the display property from the <p> element.

Then show us the code.

I read the quirksmode page. And I ask again, why supply a property and value when none is needed at all?
Why do you not answer the questions? Tell us how you believe this code will be useful to you? As I see it, itā€™s wasted bytes.

114

@ronpat said he didnā€™t use them, not that he didnā€™t know what they were.

115

What do you mean, in a block element?

116

The <p> tag by default is a block element by default - check that Webkit UAS (line 42) to see

1 Like
117

I donā€™t know what webkit is.

118

Isnā€™t this a block element? <q></q>

119

Iā€™ll use blockquote, show me how to remove the indention.

120

excellent choice

one momentā€¦

OK, this is what you need to know to tackle that question.

These properties are the default properties for <blockquote>. That means that if you add no external or inline styles, these properties are part and parcel of <blockquote>. This is why you see space around it.

blockquote {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 40px;
    margin-right: 40px;
}

Just for GEE WIZ, notice that the default vertical margins (top and bottom) are 1em. That is the same value that paragraphs have as their default vertical margins, and lists, etc. Itā€™s a common default for vertical margins.

How do you override them???

You override them by applying a value of zero to each of them in your stylesheet.

They can be written individually or in ā€œshorthandā€

blockquote {
    margin-top:0;
    margin-bottom:0;
    margin-left:0;
    margin-right:0;
}

shorthand

blockquote {
    margin:0;
}
121

Webkit is the browser engine that Firefox is built on top of. The user agent stylesheet for Webkit is what provides the default behaviour for all of the HTML tags you display inside Firefox. Before you go getting the wrong idea, you need to to know that:

  1. You cannot change the User Agent Stylesheet itself, but
  2. You can reset it using something like that Eric Meyer page I lined to, or
  3. You can override it with either the inline styles you are using, or more properly using separate CSS files

Right now, only number 3 is relevant to what we are doing. You do need to be aware though that everything you are doing with the styling is overriding what the browser has built into it as part of its User Agent Stylesheet.

122

I donā€™t want to do any of that.