Vnořený blok má nastaveno:
.potomek {
width: 100%;
padding: 0.5rem;
border: solid 0.5rem #800;
background-color: #ffd;
}
Jelikož width určuje šířku vlastního obsahu a nezahrnuje výplň,
rámečky ani okraje, se šířkou 100% se do svého rodiče nevejde:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam tempor augue at libero. Fusce nec odio. Praesent sit amet nisl nec purus pretium convallis.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Vestibulum aliquet varius dolor. In non lectus. Aliquam lobortis enim eu nulla. Quisque ut velit. Donec dapibus rutrum risus. Curabitur luctus velit a odio.
V následující ukázce je vnořený blok nastaven stejně, jen obsahuje navíc
box-sizing: border-box. Díky tomu jeho width zahrnuje
i jeho výplň a rámeček a celkově činí přesně 100% šířky obsahu jeho rodiče:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam tempor augue at libero. Fusce nec odio. Praesent sit amet nisl nec purus pretium convallis.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Vestibulum aliquet varius dolor. In non lectus. Aliquam lobortis enim eu nulla. Quisque ut velit. Donec dapibus rutrum risus. Curabitur luctus velit a odio.
zpět: CSS – rozměry bloku