Master programming syntax, solve interactive challenges & run live code in Syntaxis Explore Arena →
menu_book Course Curriculum (Intro to HTML & CSS) expand_more
HTML Basics
Document structure Head metadata Headings and paragraphs Links Images and alt text Lists Tables Forms and labels
Semantic HTML
header main footer nav landmark article and section figure and figcaption button versus link details and summary time element address element
CSS Basics
CSS selectors Class selectors Cascade and specificity Box model Margin and padding Typography Colors Borders
Layout & Responsive
display block and inline Flexbox basics Grid basics Positioning Media queries Responsive images CSS custom properties Focus styles
Intro to HTML & CSS / CSS Basics

Box model

Learn Box model in Intro to HTML & CSS with a focused explanation, a topic-specific example, and a mastery check.

12 min read • Intermediate
intro-html-css-020.html
html 
<style>.card{width:240px;padding:20px;border:4px solid #334155;margin:16px;box-sizing:border-box}</style><div class="card">240px border-box card</div>
What to watch
Content source & attribution
Original Syntaxis Content · Original Syntaxis Content

Lesson quizzes

Box model Mastery Check →
← PREVIOUS
Cascade and specificity
NEXT →
Margin and padding