homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

What is a block

WebmasterWorld Senior Member 10+ Year Member

Msg#: 4491799 posted 7:31 am on Sep 6, 2012 (gmt 0)

I can't quite work out what a block is, or what it is for or when it is required.



WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

Msg#: 4491799 posted 9:14 am on Sep 6, 2012 (gmt 0)

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.


WebmasterWorld Senior Member 5+ Year Member

Msg#: 4491799 posted 10:09 pm on Sep 6, 2012 (gmt 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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved