The document discusses CSS box model concepts including boxes, borders, margins, padding, and dimensions. It provides examples of how to control the width, height, padding, margins and borders of boxes using CSS properties. It also covers the difference between block and inline boxes and how to set them as block or inline using the display property.
2. the box model
• All HTML elements are rendered as
boxes
• Stylesheets can control how to display
these boxes (color, placement, etc)
• There arepaddingproperties of boxes:
border,
3 basic
and margin
30. speed test 04
#hot p {
width:100px;
border:3px solid yellow;
margin-left:auto;
margin-right:auto;
font-size:30px;
padding:5px;
}
31. types of boxes
• HTML boxes can be categorized into
two types:
1. Block
2. Inline
• They can be controlled by the CSS
property display
32. BLOCK BOX
• Occupies the whole
width of the
container element
• Has whitespace
before and after it
• Dimensions are <p> <h1> to <h6>
<div> <ul> <ol> <li>
controllable
33. inline box
• Only as wide as
its content
• Flows with text
lines
• Dimensions
aren’t easily
controllable <a> <span>
<strong> <em> <img>