Conteúdo do Curso
CSS Fundamentals
CSS Fundamentals
Challenge: Predict the Page Layout
Task
Examine the provided HTML code and predict how the page will look in the browser. There are three <div>
elements, each containing a combination of an inline and block-level element.
html
Questions to Consider:
How will the inline and block-level elements interact within each
<div>
?How will the order of elements affect the layout?
What will be the visual hierarchy of inline and block-level elements within each
<div>
?
How will the inline and block-level elements interact within each
<div>
?In the first and second
<div>
, the<span>
element (inline) appears before the text (block-level);In the third
<div>
, the<span>
element is in the middle of the text (block-level).
How will the order of elements affect the layout?
In the first
<div>
, the text "This is a block-level element." will likely appear below the inline element due to the default block-level behavior of the<div>
container;In the second
<div>
, the order of elements is reversed, so the text will likely appear above the inline element;In the third
<div>
, the text and inline element are interspersed, so the layout might show the text and inline element in the sequence.
What will be the visual hierarchy of inline and block-level elements within each
<div>
?The inline element (
<span>
) is likely to appear inline with the text in all cases, but its position might vary based on the order of elements within the<div>
.
index.html
index.css
Obrigado pelo seu feedback!