Photo by Flavio on Unsplash

Photo by Flavio on Unsplash

TIL about background-clip

standards compliant A wizard is never late, nor is he early. He arrives precisely when he means to. h CSS box model quirks A wizard is never late, nor is he early. He arrives precisely when he means to. width height width

standards compliant A wizard is never late, nor is he early. He arrives precisely when he means to. h CSS box model quirks A wizard is never late, nor is he early. He arrives precisely when he means to. width height width

standards compliant bp h pb CSS box model A wizard is never late, nor is he early. He arrives precisely when he means to. quirks width pb pb bp height bp A wizard is never late, nor is he early. He arrives precisely when he means to. bp width pb

standards compliant bp h pb CSS box model A wizard is never late, nor is he early. content He arrives precisely whenbox he means to. quirks width pb pb bp height bp A wizard is never late, nor is he early. content box He arrives precisely when he means to. bp width pb

standards compliant bp h pb CSS box model A wizard is never late, nor is he early. padding box He arrives precisely when he means to. quirks width pb pb bp height bp A wizard is never late, nor is he early. padding box He arrives precisely when he means to. bp width pb

standards compliant bp h pb CSS box model A wizard is never late, nor is he early. border box He arrives precisely when he means to. quirks width pb pb bp height bp A wizard is never late, nor is he early. border box He arrives precisely when he means to. bp width pb

standards compliant bp h pb CSS box model A wizard is never late, nor is he early. content He arrives precisely whenbox he means to. quirks width pb pb bp height bp A wizard is never late, nor is he early. border box He arrives precisely when he means to. bp width pb

bp h pb CSS box model A wizard is never late, nor is he early. content He arrives precisely whenbox he means to. bp width pb pb bp height box-sizing: content-box A wizard is never late, nor is he early. border box He arrives precisely when he means to. box-sizing: border-box bp width pb

<!DOCTYPE html>

<!DOCTYPE html>
  • { box-sizing: border-box; }

<!DOCTYPE html>

*, “#before, “#after { box-sizing: border-box; }