|
| |
| block multiline inline box model with margin and padding |
|
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type='text/css'>
div {
margin: 10px;
background: #aaa;
height: 100px;
}
span#floated {
background: #ccc;
margin: 10px;
padding: 10px;
border: 1px solid black;
float: left;
width: 100px;
}
span#normal {
background: #ddd;
border: 1px solid black;
opacity: 0.7;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<div>
<span id='floated'>
This span is floated left.
</span>
<span id='normal'>
The text of this span is beside the floated span.
The text of this span is beside the floated span.
The text of this span is beside the floated span.
The text of this span is beside the floated span.
The text of this span is beside the floated span.
The text of this span is beside the floated span.
The text of this span is beside the floated span.
</span>
This is extra text. This is extra text. This is extra text.
</div>
</body>
</html>
|
|
|
| Related examples in the same category |
| 1. | Box Dimensions | | | | 2. | Box Model defines properties of: display, width, height, padding, border, margin, background, overflow, and visibility. | | | | 3. | Spacing: indentation, margins, padding, letter spacing, word spacing, text justification, and line spacing | | | | 4. | Box Model Basics | | | | 5. | Understanding the Box Model | | | | 6. | The margin Properties | | | | 7. | The Padding Properties | | | | 8. | Box model for child and parent relationship | | | | 9. | Inner box | | | | 10. | Inner box with DIV | | | | 11. | Inner box padding and border | | | | 12. | Left text alignment for inner box | | | | 13. | Box model with div | | | | 14. | Width setting | | | | 15. | Float left in a container | | | | 16. | Float inside | | | | 17. | Simple float clearing in Mozilla | | | | 18. | Setting box dimensions and aligning text | | | | 19. | Floating elements and element boxes | | | | 20. | Setting borders of an element | | | | 21. | Block Box | | | | 22. | Table Box | | | | 23. | border and padding shrink the inner box of stretched absolute boxes. | | | | 24. | A percentage of the height of its container. | | | | 25. | A percentage of the width of its container. | | | | 26. | auto is the default value for width and height. | | |
|