Representation of the boxes (box) CSS
The block elements are for example, the element <body>, the container <div>, the paragraphs, the lists, and tables. Each block box starts on a new line and generally occupies all the available width. That means that, in the flow of text, they are always arranged one below the other.
Block box
Block elements are, for example, the <body> element, the <div> container, paragraphs, lists and tables.
Each block box starts on a new line and generally occupies all the available width. That means that, in the text flow, they are always arranged one below the other. The height is regulated according to the content. These boxes can only be descendants of other block elements.
Some of the most typical block elements are:
Address, bloquote, dir, div, dl, fieldset, form, hx, hr, menu, noframes, noscript, ol, p, pre, table, ul.
Inline box
frames Inline box do not require a new line before or after the element. Within the normal flow of text, they always appear arranged next to each other, without margins with respect to the contiguous elements, they cannot be assigned dimensions and they only occupy the necessary place for their content. They can be child elements of any other block or inline element and can contain other inline elements.
Some typical inline elements:
a, abbr, acronym, applet, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, iframe, kbd, label, map, object, q, samp, script, select, small, span, strong, sub, textarea, tt, var.
Inline box model
Inline elements have their own frame model, which consists of a line box and an inline box. It's a pretty complicated model and not very mature yet.
Line box
It is the table itself and contains all the lines. Vertically it extends from the aligned inline frame higher up to the lower side of the inline box located below.
Inline box
Each piece of text generates an inline table. There are five basic horizontal lines that influence the inline box.
- Logical-top
- Font-top
- Baseline.
- Font-bottom
- Logical-bottom
The difference between Font-top and Font-bottom is defined by the height of the font, the distance between logical-top and logical-bottom is determined by the line-height property. The value of line-height always determines, therefore, the height of the inline frame of any text part.
For different text parts (for example, defined with greater height or expanded) an inline frame is calculated. The line box is defined once calculated and all inline tables are computerized.
The old browsers and also IE, in its different versions, interpret some formats and the line jump inside the box in very different ways, so it is essential to test them thoroughly.
ChatGPT Free
Ask questions on any topic
CITE ARTICLE
For homework, research, thesis, books, magazines, blogs or academic articles
APA Format Reference:
Delgado, Hugo. (2019).
Representation of the boxes (box) CSS.
Retrieved Dec 11, 2024, from
https://disenowebakus.net/en/css-box-inline-block
Participates!
Share it with your friends in Social Networks!CONTINUE LEARNING
IT ALSO DESERVES TO PAY TO VISIT:
CSS allows to release the elements of the normal flow of the document and position them at will with...
Web accessibility means that people with some type of disability will be able to use the Web...
Specificity is one of the criteria used by the browser (or other user agents) in case of conflict to...
The pseudo CSS classes allow you to select elements by applying criteria that can not be extracted...
