Why Aren't My div Tags Given Line Breaks?

I wrote a poem, and I re-wrote the poem in HTML so I could include it on my blog. However, even though I wrapped each stanza in <div> tags, there are no line breaks between them like there are supposed to be.

According to w3schools.com, "By default, browsers always place a line break before and after the <div> element. However, this can be changed with CSS."

You'll note I have no CSS in the code, however, so I don't know why it doesn't have line breaks.


JSFiddle: https://jsfiddle.net/43dn9tr9/2/

--------------Solutions-------------

As a brief aside, w3schools is legendary for being abject shite. You may want to try something more reputable.

The output of your HTML is entirely correct- the divs are on new lines. The explanation that w3schools has given you is not really very descriptive, since it implies line breaks that don't really exist. In fact, it's best not to think of layout in terms of line breaks, because that's not how the model works at all.

It might be better to say that divs are blocks which are arranged vertically with respect to each other (ignoring CSS of course). In your output, the three divs are arranged vertically. A good demonstration of this is to replace your br tags with placing each line inside its own div, which achieves an identical result. https://jsfiddle.net/43dn9tr9/3/

Your div tags do have line breaks. Line breaks are the same thing as you get with your br tags. That's why br tags are called that, they are line break tags.

Without line breaks the line would just continue like this:

This is Stanza 1, Line 4. This is Stanza 2, Line 1,

I think you are looking for vertical margin between your stanzas. If you don't want to use CSS, the P tag has vertical margin by default, which approximates the spacing between stanzas of a poem.

See this question (but ignore the down-voted first, accepted answer).

I suppose you want the stanzas to be separated by white space, which is not the same as line breaks.

You can achieve this by using <p> instead of <div>. See https://jsfiddle.net/43dn9tr9/6/

This works because browsers give <p> a vertical margin by default. You can make <div> behave the same way using CSS.

<style>
    div.stanza {
        margin: 20px 0;
    }
</style>

<div class="stanza">
    This is Stanza 1, Line 1,<br>
    This is Stanza 1, Line 2,<br>
    This is Stanza 1, Line 3.<br>
    This is Stanza 1, Line 4.
</div>

[...]

Replay

Category: html Time: 2016-07-29 Views: 0
Tags: html markup

Related post

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development

search

Front-end development

Database

development tools

Open Platform

Javascript development

.NET development

cloud computing

server

Copyright (C) avrocks.com, All Rights Reserved.

processed in 0.517 (s). 12 q(s)