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.

Representation of the boxes (box) CSS | Learn 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.

  1. Logical-top
  2. Font-top
  3. Baseline.
  4. Font-bottom
  5. 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!

Professor at the University of Guadalajara

Hugo Delgado Desarrollador y Diseñador Web en Puerto Vallarta

Professional in Web Development and SEO Positioning for more than 10 continuous years.
We have more than 200 certificates and recognitions in the Academic and Professional trajectory, including diploma certificates certified by Google.

CONTINUE LEARNING

IT ALSO DESERVES TO PAY TO VISIT:

Not finding what you need?

Use our internal search to discover more information
Related content:

Would you like to learn more about Web Design?

Meet all the courses and tutorials that we have for you completely free
Learn Web Design
 

Leave your Comment

SPONSOR

Your business can also appear here. More information

Next article:

Your browser has blocked advertising.
Please 🙏 Allows you to view the ads to access, thank you.