What changes occur when we add <div> tag and what is difference when we add <p> tag in <div> tag ?

Question

People said that div is a block element which separate paragraphs etc but i don't understand what is difference when we write paragraphs in div tag and when we don't write ?

Answer 1

<div> is referred to as block-level element because when you place it html, it will automatically add margin(space) between other elements.

<div> is like a block (mini-page) inside your webpage, therefore you can use multiple div elements to style multiple parts of the webpage.

You can also have only certain elements inside div, and therefore only apply certain styles to these elements that will not effect elements outside of div element.

if you have <p> inside <div> , and if you change the position of <div> the <p> within that <div> will also move.

if you have <p> outside of <div> , and if you change the position of <div> , the position of <p> will not change

Answer 2

Lamron what do u mean by position changing of div. Do u want to say that if we apply attributes in then the attributes also effect on the paragraphs but the paragraphs which r outside the div tag aren't be effected or modified by that attribute ?

Answer 3

Kind of yes. What I'm saying is that if you change the position of div element on the webpage, e.g. move it to the left or right, top or bottom. It will also effect the content inside div, and not the content out the div

Answer 4

<div align="left"><p>Example1</p></div>

<div align="right"><p>Example2</p></div>

<div align="center"><p>Example3</p></div>

Answer 5

With more complex styling, for more efficient use, you will not use inline CSS. For several different reasons:

1. Untidy
2. Html file will be too big
3. Each element will be also big, therefore will be unreadable.

An other styling properties will be used

Answer 6

try this code:
<div>
<p>test</p>
</div>
<p>text</p>
In this code,you'll see that 'text' is farther from 'test' than usual.now try the same code without div tag.you will notice that now the two text are closer.
div tag keeps everything outside it away than normal from the things inside it.
You can also use it to create dropdown buttons(not dropdown list),and navigations bars.

Answer 7

Before the introduction of HTML 5 semantic tags.
<article><aside><footer><header><nav><section>
We used the div element to separate parts of our websites.

Div is short for division.
You are correct in your understanding about attributes. Some attributes will apply to the children of the parent element.

In this example we will give the p element a solid black outline to show where it starts and ends.
We will also give the p element its default color.

The div element will have a red outline. And the child paragraphs elements will aslo have the same color.

Can you see the purpose?

https://code.sololearn.com/W8rt0kwaVI4z/?ref=app

Answer 8

In the garden ohh! I thought the same changing position of div by align attribute. Thanks :)

Answer 9

In the garden But what is the need we can also put this attribute in <p> tag

Answer 10

Lamron yes ! People don't use inline CSS much, internal and external CSS are good.

Answer 11

Chris Coder Thanks bro and nice code it's totally separating div from p tag 👍🏻

Answer 12

RandomTuber yes bro div take more space it separate the content from other tags :)