CODEWITHSUNDEEP
htmlcss
Rekha
Rekha

Reputation: 335

How can I know a block level element spans multiple lines or sigle line

I am new to css. I am reading about block-level elements. "div" is a block level element. "p" is also a block level element.

"Browsers typically display the block-level element with a newline both before and after the element. You can visualize them as a stack of boxes" from https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

But when using "div", I can see that it does not add a new line unlike other block level elements like "p" or "h1".

I mean I could see a difference with the following code snippets

<p> Text1</p> 
<p> Text2 </p>

<div> Text1</div> 
<div> Text2 </div>
In the 1st code snippet, a new line is added after a "p" element. In the 2nd code snippet, a new line is not added after "div" element.

So why "div" is not adding a new line? Can anyone please help in understanding this?

Upvotes: 1

Views: 98

Answers (3)

MarioZ
MarioZ

Reputation: 997

Newline means that block-level elements start in the next line following the normal flow of the document, that's one of the differences between for example div and span:

Generally, block-level elements begin on new lines, inline elements do not.

From https://www.w3.org/TR/html401/struct/global.html#h-7.5.3

As other users explain, it's not a gap between yhe block and other elements, the space is given by margins or paddings. But a block-level element like div, unless is set to display as inline-block or is out of the normal flow of the document with position or float, starts in a new line.

Upvotes: 1

user4447799
user4447799

Reputation:

"I can see that it does not add a new line unlike other block level elements"

There is no new line. It's just that p and h1 may have default padding/margin which makes separates it from other content;

The following snippet displays two p and two div elements with default padding and margin

p { background-color: #8ABB55; }

div { background-color: #8BFB55; }
<p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p>

<p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p>

<div>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</div>

<div>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</div>

Now for the same html, the following snippet displays the two p and the two divs with no padding and margin for the p this time

p {
  background-color: #8ABB55;
  padding: 0;
  margin: 0;
}

div {
  background-color: #8BFB55;
}
<p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p>

<p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p>

<div>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</div>

<div>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</div>

You can see that now the p is no different than your default div

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206467

There's no such thing as "new line" only default margins that are applied to elements like H1 and P.

want to null them?

body, p, h1, h2 /* etc*/ { margin: 0; }

Exactly. DIV has no default user-agent margins.

Upvotes: 2

Related Questions