So that's the theory
behind block and inline elements.
If we look at these elements in our project here,
we saw that we have both on our page here,
here in the header, we have an h1 element, paragraph,
both block elements, and this anchor tag,
which is an inline element.
And if I would add a second anchor tag,
here, duplicating this, and saving it,
well, you'll see that these are displayed
next to each other,
so each block element occupies the entire width,
or the whole line, so to say.
For anchor tags, this is not the case,
these just required a space,
well, they need to be displayed.
Here, we can, of course, get rid of the second anchor tag.
And with that, we have our style back.
By the way, the reason why this anchor tag
and this inline element is displayed in a new line
is because the paragraph before is a block element,
therefore, the next element is also in a new line.
However, there are some more things to consider
when working with block and inline elements.
If we look at our header element here,
the header is the parent of all these three elements
I just talked about.
You see that the content of the header,
So the blue part, does not contain all elements,
it kind of cuts off our anchor tag,
our button with the "View Today's Challenge" text.
Specifically, it cuts off the button at a certain point.
If we go to the button,
you see that here, "View Today's Challenge,"
the text, is the actual content of that anchor tag.
And that's where the content is also cut off here
in our header element.
Now this is happening because for inline elements,
we have certain special rules
when it comes to applying the padding, top or bottom,
or a margin, also top or bottom.
Let's get started with the margin maybe.
In our code, we go to the full-week.css file
and here to our anchor tag.
At the moment, no margin is added,
and if I would add a margin now,
like this maybe, and we add a top and bottom margin
of maybe 30 pixels and of zero for the left and the right,
if we do this, nothing changes.
We see that in our anchor tag here,
that this margin property was applied,
but it doesn't have an impact.
We can also scroll down here to see our box model,
where the margin is actually displayed.
So there should be a margin, but in the real world,
as you see it, it doesn't have any effect here.
It's not displayed.
If I would go back and also add a left and right margin,
maybe of 12 pixels,
this would be displayed.
You see the orange part here?
Because left and right margins
can be added to inline elements,
which kind of makes sense as inline elements
are placed next to each other in the same line.
Whereas top and bottom margins simply do not work.
That's one thing to keep in mind here,
and that's also the reason
why the distance between our two elements here
was added with this paragraph here.
However, also in this paragraph, in the margin,
we see that the margin again,
kind of overflows the button, so to say.
It again ends at the content of our anchor tag here,
so kind of the same logic we saw
for the content of the header.
Now, that's the second limitation we have
when it comes to working with inline elements.
Back in our code, we can first delete that margin,
which is not working,
and now we can focus on to the padding here.
We added a padding of 12 pixels to our element,
and I will change this now to zero pixels here.
Going back, you see that our button of course changed,
no padding is added anymore.
And if we now go to our paragraph,
you see that now the bottom margin of this paragraph
exactly ends where the button begins, so to say,
because we didn't add any padding.
Same logic applies to our header.
Here, the content of the header element
now exactly contains the content of our anchor tag,
the padding was ignored somehow.
We can't even play this a bit further.
For our paragraph, we have a big bottom margin here,
as we can see it.
That's this bottom margin we have right here.
If we quickly remove any margin
from our description ID here,
like this,
you see that the paragraph and the anchor tag
are displayed one after another.
Now, if we go back to the anchor tag
and bring back some padding,
some top and bottom padding of 12 pixels here,
then the padding is added.
But as you'll see the button now
kind of hides the previously displayed paragraph.
Now this is happening because top and bottom padding
can be added to inline elements,
but this padding does not move other elements up.
If we go back to our code, and set this back to zero,
and instead add the padding here to our description,
so let's say padding bottom,
maybe 50 pixels to make it really clear.
If we do that, you see that this padding we added,
this one here,
is now moving down the next element,
because the padding defines the distance
between the content and the border of our element.
But with that,
the element gets bigger and therefore other elements,
following elements, or previous elements
are pushed up or down.
This is not the case for our inline element though,
as we saw it, so we can delete this.
Now the question is, "What can we do here?"
Let's first add our padding maybe,
like this, to make it look better.
And how can we fix this now?
Well, we could of course, add a margin here,
maybe of, I don't know, 20 pixels,
and then play around to get the right distance.
But then we again have this issue
that the content is not covering the entire elements inside,
so it's not what I would recommend here.
Instead, we have another, well, trick,
which kind of helps us here,
and this is the display property.
The display property, which can be added here,
written like this, so simply "display,"
and this property now allows us to define the way
our elements are displayed
and which ways do we have to display elements?
Well, one way here would be display inline,
so this would just mean
that this element should be displayed as an inline element.
Well, the anchor tag is an inline element,
therefore, no difference here.
And let's maybe set this margin here to zero,
for the moment, to have this better visible,
so this doesn't change a thing.
We could change this element to a block element,
with that, it would behave like a block element,
and as can be seen, the text is now visible
and the next element is occupying the entire space
of the next line, as we didn't define a width here.
Or we can use another value, which is called "inline-block."
Now "inline-block" kind of combines both worlds,
so to say.
We have an inline element,
which can be displayed in the same line,
so not in a new line as block elements,
and we are able to apply top and bottom margins
and top and bottom padding,
which now affects the distance to other elements.
With that, as can be seen,
we now have the space defined for our inline element,
so defined by our content and the padding,
as we can see it here.
And we also have the top and bottom padding
affecting the distance to our previous element here.
Besides that, we can now also add a margin,
if we want to maybe just 12 pixels,
and zero left right.
If we do that, you see, now the margin was added,
and also has an effect on the distance
to the other element.
Besides that, if we go to our header now,
you see that the content ends with all elements,
which are part of our header element here.
So these are some core things to keep in mind,
block versus inline elements,
inline elements have limitations
when it comes to top and bottom margins or padding,
which can be overcome with the inline block element,
so we use the display property,
and change the value to inline block.