Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

What is a block

7:31 am on Sep 6, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 21, 2002
posts: 1558
votes: 0

I can't quite work out what a block is, or what it is for or when it is required.
9:14 am on Sept 6, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
votes: 594

Uhm, a block isn't anything. That is: there isn't a category called block, like <p> or <span> or <div>.*

HTML is basically divided into two types of elements: block-level ones and inline ones. An inline element is something like an <i> tag that affects the look of the text but has no effect on the layout. A block element is a free-standing chunk, like a paragraph or table.

Through the miracles of CSS you can take something that would normally be a block and tell it to be inline instead. Or vice versa. Or both in combination. But normally these things take care of themselves. So if thinking about it gives you a headache, there is no need to think about it :)

* Unless they've gone and added one in CSS3, which would be really evil and contrary to their own naming guidelines.
10:09 pm on Sept 6, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0

Hi whatson, good question. In this sense block is a characteristic of display, not a "thing". As Lucy has said, HTML elements may be block or inline by default, and that affects the way they behave. 7.5.3 Block-level and inline elements [w3.org] has a usable explanation. An element's default is identified in the sections dealing with the individual elements. (Scroll down to 7.5.4 and see it stated for div and span).

Note it is possible to change the default via 9.2.4 The 'display' property [w3.org]. So a <div> can be made display:list-item and should show a bullet. Also note that changing other default properties can also affect display.
9.7 Relationships between 'display', 'position', and 'float'
[w3.org] is supposed to explain how that works.

Understanding block and inline and their formatting contexts is needed to understand and predict how an element will behave and the detail of that is explained in chapters 9 and 10 of css2.1. (See above two links.) But be warned before starting to read. Although this is needed to understand element behaviour, and the recommendation writers are very good at making things easy to understand, those chapters aren't their best work ;) However, I think it is possible to get a general understanding from a skim read - and come back and ask questions.