Working with Block-Level Elements
Block-level elements are rectangular and stack on top of each other, preventing other elements from sharing the same line. This behavior is controlled by the CSS property display: block
.
Key points about block-level elements:
- They default to
display: block
; - Their width spans the full width of the parent container;
- Their height is determined by the content but can be customized with CSS;
- They always start on a new line;
- Properties like
border
,margin
,padding
,width
, andheight
can be adjusted.
Let's explore an example where we manipulate width
, height
, and margin
:
index.html
index.css
Let's consider how we can center an element inside its parent.
index.html
index.css
Tudo estava claro?
Obrigado pelo seu feedback!
Seção 3. Capítulo 8