question about the line breaks of the <div> element

This site is best viewed in a modern browser with JavaScript enabled.

question about the line breaks of the <div> element

sepultribe

hi everyone i'm new here :eek: i have found this forum while searching for information and i like it very much!

my question might be a little silly. i have read in tutorial sites that the <div> element as a block element inserts a line break before AND after itself, but running the code i only see the line break after the element. the same doesnt happen in the <p> element, which is a block element too. so why does div behave like this? did they change the behavior recently maybe?

thank you

rtrethewey

All block level elements behave the same in this regard. It's misleading to say that any element generates a line break. Rather than try to squeeze a lot of definitions into a message here to try to explain, I'd suggest you read the W3C Box Model specification. It's an ocean of dry complicated text, but surprisingly well-illustrated. So start by looking at the examples, and absorb the technical terms as you go. It'll probably take several times through before it sinks in, but you'll get it.

Nicholas_Diaz

If you don't like the way it turns out just use margin to manipulate the position of the div

sepultribe

it's more about understanding what i read and why something happens for some elements of a certain and type and for others does not. i will have to read about the box model.

thank you both for your time

ebar

i like to explain divs as say a sticky note(all different sized post-it's) stuck on a piece of paper. if you remember that everything inside a div that you have set say the text color will be the same through out all the stickynotes on/in each one unless you specify otherwise.

i can elaborate more if you like however the best tool to use is to play around with the div and start with background-color and change it for each div you put on the page. then you can see how they relate to one another and itself.

later you can put div inside div inside div inside div and see how that turns out. As far as the line break you speaking of you can change that as well for each div you put on the page..

rtrethewey

The fundamental behavior of all block-level elements is the same. If two different block-level elements don't behave the same in your document it's because something in your stylesheet is causing it. Post your code or a link to an example, and someone will explain the problem.