www.webdeveloper.com
Results 1 to 6 of 6

Thread: question about the line breaks of the <div> element

  1. #1
    Join Date
    May 2013
    Posts
    3

    Lightbulb question about the line breaks of the <div> element

    hi everyone i'm new here 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

  2. #2
    Join Date
    Mar 2011
    Posts
    1,139
    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.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    If you don't like the way it turns out just use margin to manipulate the position of the div

  4. #4
    Join Date
    May 2013
    Posts
    3
    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

  5. #5
    Join Date
    Mar 2009
    Location
    Texas
    Posts
    124
    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..
    Samantha Morrison
    Knock-Out Web Designs
    http://kowebdesigns.com
    Website Developer/Designer

  6. #6
    Join Date
    Mar 2011
    Posts
    1,139
    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.
    Rick Trethewey
    Rainbo Design

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles