Transcript
![Page 1: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/1.jpg)
Cap 9
Box model
![Page 2: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/2.jpg)
a
![Page 3: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/3.jpg)
![Page 4: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/4.jpg)
![Page 5: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/5.jpg)
Esercizio
![Page 6: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/6.jpg)
Box Model
![Page 7: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/7.jpg)
What you can do to boxes
![Page 8: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/8.jpg)
![Page 9: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/9.jpg)
![Page 10: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/10.jpg)
![Page 11: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/11.jpg)
Creating the guarantee style
esercizio lounge
![Page 12: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/12.jpg)
![Page 13: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/13.jpg)
![Page 14: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/14.jpg)
![Page 15: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/15.jpg)
Padding, border, margin for the guarantee
![Page 16: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/16.jpg)
Adding some padding
![Page 17: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/17.jpg)
![Page 18: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/18.jpg)
Adding some margin
![Page 19: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/19.jpg)
![Page 20: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/20.jpg)
![Page 21: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/21.jpg)
Adding a background image
![Page 22: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/22.jpg)
![Page 23: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/23.jpg)
Test driving the background image
![Page 24: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/24.jpg)
![Page 25: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/25.jpg)
Fixing the background image
![Page 26: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/26.jpg)
Fixing the background image
![Page 27: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/27.jpg)
![Page 28: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/28.jpg)
How do you adding padding only on the left?
![Page 29: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/29.jpg)
How do you increase the margin just on the right?
![Page 30: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/30.jpg)
![Page 31: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/31.jpg)
![Page 32: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/32.jpg)
![Page 33: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/33.jpg)
![Page 34: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/34.jpg)
Border Corners
![Page 35: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/35.jpg)
![Page 36: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/36.jpg)
esercizio
![Page 37: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/37.jpg)
soluzione
![Page 38: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/38.jpg)
How to use id in CSS
![Page 39: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/39.jpg)
Using an id in the lounge
![Page 40: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/40.jpg)
css media query
![Page 41: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/41.jpg)
metodo 1
![Page 42: Cap 9 - DMIUnipg · See if you can identify the padding, border, and margins of this paragraph. Mark all the padding and margins (left, right, top, and bottom): don't forget, the](https://reader031.vdocuments.mx/reader031/viewer/2022040210/5e60b428db44ba595736a80c/html5/thumbnails/42.jpg)
metodo 2