[Konnor]

I'm working through one of Chris Spooners PSD to HTML/CSS tutorials and am struggling to understand the use of display:block in the navigation bar.

A live demo of the site can be found here: http://line25.com/wp...demo/index.html

For testing and understanding purposes, I added some background colours, and removed the display:block to see what happens.

With Display Block



Without Display Block



My basic understanding of display:block is that it takes up the full width available, and has a line break before and after.

So my questions are, with my own thoughts...

• Why isn't the width factored in when you have display: block set?
  
• Why without display:block does the height exceed the containing element?
  
• Why does the navigation bar appear to have shifted down slightly when display: block is set?
  
• Couldn't the same result be achieved by using left and right padding, instead of width? Any reason why you might opt for this method?

Many thanks,

This post has been edited by Konnor: 02 February 2012 - 10:34 PM

[Glowbridge]

I have to say I don't actually know the exact differences however I tend to think of it in terms of soft/hard.

Without display:block the menu item's edges are 'soft' and not enforced. The other elements can shift them about to make room for themselves, so they do, in this case shifting everything down until it bumps into the next 'hard' element. Which is the text itself.

The reason the green area is dropping down behind the red menu items is, I think, because the menu items are floated left. In terms of page structure the green area is completely ignoring the height of the red elements. That height:50px (Or whatever it is) is not being listened to because of the float. It IS still being visually represented though.

With display:block you are telling the red menu item to enforce it's borders essentially. That if it's 50px high and contained inside an element it'll make sure it has 50px of height. If it has padding on either side of the text it'll push adjacent elements out the way until it gets its 15px of padding.

Some elements are soft by default, others are hard. <h1><h2> etc are hard. <span><li> are soft.

This post has been edited by Glowbridge: 02 February 2012 - 11:07 PM

[mrchristoph]

Display block basically means you can set exactly a width height, padding, margins etc... Display inline means the content will kind of flow and do it's own thing based on font, line-height, and different browsers will do slightly different things. Display inline-block is a happy in-between sometimes!

[Konnor]

So as a general rule would it be fair to say that width is ignored unless you have display: block set? And would this be because <a> is an inline element by default and similar would occur for other inline elements such as <span>?

Thanks for the responses so far.

[mrchristoph]

Konnor, on 04 February 2012 - 09:55 AM, said:

So as a general rule would it be fair to say that width is ignored unless you have display: block set? And would this be because <a> is an inline element by default and similar would occur for other inline elements such as <span>?

Thanks for the responses so far.

yep, exactly.