Scribd
Upload
15 views8 pages

CSS-3 Box Model and Text Flow

The document discusses the CSS box model, which is a fundamental concept in web design that includes margins, borders, padding, and content areas. It explains how these properties define the layout and design of HTML elements, as well as the concept of text flow and the text-overflow property in CSS. The box model serves as a toolkit for customizing the appearance of web pages.

Uploaded by

himanshupdev
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
15 views8 pages

CSS-3 Box Model and Text Flow

The document discusses the CSS box model, which is a fundamental concept in web design that includes margins, borders, padding, and content areas. It explains how these properties define the layout and design of HTML elements, as well as the concept of text flow and the text-overflow property in CSS. The box model serves as a toolkit for customizing the appearance of web pages.

Uploaded by

himanshupdev
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd

1

By G Parthasarathy M.E, Ph.D.,


CSS

2
By G Parthasarathy M.E, Ph.D.,
CSS
• In CSS, the term "box model" is used when talking about design and
layout. The CSS box model is essentially a box that wraps around
every HTML element. It consists of: margins, borders, padding, and
the actual content.

• CSS box model is a container which contains multiple properties


including borders, margin, padding and the content itself. It is used to
create the design and layout of web pages.

• It can be used as a toolkit for customizing the layout of different


elements. The web browser renders every element as a rectangular
box according to the CSS box model.
3
By G Parthasarathy M.E, Ph.D.,
Box-Model has multiple properties in CSS. Some of them are given
below:
•borders
•margins
•padding
•Content

4
By G Parthasarathy M.E, Ph.D.,
CSS
• Border Area: It is the area between the box’s padding and margin. Its
dimensions are given by the width and height of border.

• Margin Area: This area consists of space between border and margin. The
dimensions of Margin area are the margin-box width and the margin-box
height. It is useful to separate the element from its neighbors.
• Padding Area: It includes the element’s padding. This area is actually the
space around the content area and within the border box. Its dimensions
are given by the width of the padding-box and the height of the padding-
box.
• Content Area: This area consists of content like text, image, or other media
content. It is bounded by the content edge and its dimensions are given by
content box width and height.
5
By G Parthasarathy M.E, Ph.D.,
CSS-Text flow

• In CSS, "text flow" refers to how text content is laid out and wrapped
within an element, particularly within block-level elements like
paragraphs or headings.
• It encompasses how whitespace is handled, where line breaks occur,
and how long words are managed when they exceed the available
width.

6
By G Parthasarathy M.E, Ph.D.,
CSS
• The text-overflow property specifies how overflowed content that is
not displayed should be signaled to the user. It can be clipped, display
an ellipsis (...), or display a custom string.

• Both of the following properties are required for text-overflow:

• white-space: nowrap;
• overflow: hidden;

7
By G Parthasarathy M.E, Ph.D.,
CSS

8
By G Parthasarathy M.E, Ph.D.,

You might also like