now,
time to understand block and in line elements that I talked to in previous video.
In an HTML document,
we can have these two types off elements block and in line.
It's very important to understand the concept at the differences between these two types of
elements that are widely using where pages to create different sections,
starting with block elements a block element by default always start on a new line and
occupy all the with,
like some elements that you already know,
like tariffs.
Tables are forms and block elements stack up one on top off the other.
I now create an example with the existing paragraphs where I define for the first a new
property names,
background color,
death defying scholar to element backgrounds.
For this example,
I apply a background color with blue value that help us to see the spice occupied by the
paragraph.
You see that after using the property,
the paragraph occupies the entire with off the page.
Like I said,
that happens with block elements.
If I simply leave the paragraph with a few words,
you see that paragraph continues to occupy the full with.
If I define background color to second paragraph you see,
the second paragraph is below first,
occupying again,
all the with I introduced now a new important block element did.
If represented by DIF Tech Network as a container having a start and ending tech and is one
off the most used to create different sections in a webpage,
allowing to put and separate the contents off the page,
the settlement works like tariff and other block elements occupying all the hydrates.
I now define a section in my code,
using def that contains the two paragraphs that I m in the page and give glass name
container to this new element in my CSS coat I defined for this class a green collar
backgrounds and the padding off 10 pixels.
After these changes,
you can see that our paragraphs are inside these elements that occupies all the page wreath
.
Now it's time for the in line elements and in line element does not start on the new line
and only takes up as much with as necessary.
What not happens with block elements.
Examples like images are April Inc elements represent in line elements.
I now creating my coat a text with April ing to see that this ailment does not like a by
the full wheat.
For these,
I use a tech for April ink and some texts into CSS cold.
I set now for the settlements,
a red color backgrounds and looking to the page.
You see that this element occupies only the spice off its content.
What not happens with the paragraphs?
After having used a new block element,
Deve,
I use now a new in line element,
the element span that is represented using this Pantech debt as a start an ending tech.
I now use the first tariff and puts involved text inside this new element.
If I said this element to a gray color background,
you see that only the content that is inside the stack is affected by the background color
working like an in line element.
Okay,
in resume,
we can have two types of elements block aunt in line.
The block elements occupy the entire with off the page like deep debt we created with
background color green and the paragraphs with blue background color deadline elements do
not take a pitiful wheat being.
The example used in the speech and Nipper link with rev background color and the new span
elements with background color gray Thanks