Scribd
Upload
13 views

4css - Part Box Model

There are two types of boxes in CSS - block boxes and inline boxes. Block boxes break onto new lines, extend fully across their container, and respect width and height properties. Common block elements include headings and paragraphs. Inline boxes do not break onto new lines, do not respect width and height, and allow other inline boxes to sit beside them. Common inline elements include links and spans. The document then provides examples of using different display properties to change how elements are rendered as blocks or inlines.

Uploaded by

life seconds
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
13 views

4css - Part Box Model

There are two types of boxes in CSS - block boxes and inline boxes. Block boxes break onto new lines, extend fully across their container, and respect width and height properties. Common block elements include headings and paragraphs. Inline boxes do not break onto new lines, do not respect width and height, and allow other inline boxes to sit beside them. Common inline elements include links and spans. The document then provides examples of using different display properties to change how elements are rendered as blocks or inlines.

Uploaded by

life seconds
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 10

 Two types of boxes — 

block boxes and inline boxes.


 These characteristics refer to how the box behaves in terms of page flow,
and in relation to other boxes on the page:
 The box will break onto a new line.
 The box will extend in the inline direction to fill the
space available in its container. In most cases this
means that the box will become as wide as its
container, filling up 100% of the space available.
 The width and height properties are respected.
 Padding, margin and border will cause other
elements to be pushed away from the box
 Elements such as headings (e.g. <h1>) and <p> all
use block as their outer display type by default
 The box will not break onto a new line.
 The width and height properties will not apply.
 Vertical padding, margins, and borders will apply but will not
cause other inline boxes to move away from the box.
 Horizontal padding, margins, and borders will apply and will
cause other inline boxes to move away from the box.
 The <a> element, used for links, <span>, <em> and <strong> are all
examples of elements that will display inline by default.
<p>I am a paragraph. A short one.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
<p>I am another paragraph. Some of the
<span class="block">words</span> have been wrapped in a <span>span element</span>.
</p>

p, ul { border: 2px solid rebeccapurple; padding: .5em; }

.block,li { border: 2px solid blue; padding: .5em; }

ul { display: flex; list-style: none; }

.block { display: block; }


<p>
I am a paragraph. Some of the
<span>words</span> have been wrapped in a
<span>span element</span>.
</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
<p class="inline">I am a paragraph. A short one.</p>
<p class="inline">I am another paragraph. Also a short one.</p>

p, ul { border: 2px solid rebeccapurple; }

span,li { border: 2px solid blue;}

li { display: inline; list-style: none; padding: 0;}

.inline { display: inline;}


 Content box: The area where your content is displayed, which can be sized using
properties like width and height.
 Padding box: The padding sits around the content as white space; its size can be
controlled using padding and related properties.
 Border box: The border box wraps the content and any padding. Its size and style
can be controlled using border and related properties.
 Margin box: The margin is the outermost layer, wrapping the content, padding
and border as whitespace between this box and other elements. Its size can be
controlled using margin and related properties.

You might also like