Contenido del 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.
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).
- In the first and second
- 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.
- In the first
- 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>
.
- The inline element (
index
index
index
¿Todo estuvo claro?
¡Gracias por tus comentarios!
Sección 3. Capítulo 10