User Tools

Site Tools


en:web_development:layout:padding_margin

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision
Previous revision
en:web_development:layout:padding_margin [2021/12/12 17:05]
mag created
en:web_development:layout:padding_margin [2023/08/16 09:33] (current)
Line 1: Line 1:
-====== Web Development Lesson - Layout ======+====== Web Development Lesson - Layout ======
 ===== Padding and Margins ===== ===== Padding and Margins =====
 ==== Objective ==== ==== Objective ====
Line 126: Line 126:
   * Add this to your '.content' CSS and check the results.   * Add this to your '.content' CSS and check the results.
   * As 'inline-block' elements, they will fill up the line then drop to the next line when the first is full. Try making the blocks wider to see this in action.   * As 'inline-block' elements, they will fill up the line then drop to the next line when the first is full. Try making the blocks wider to see this in action.
-<code>  width: 300px;</code>+<code>  width: 450px;</code>
   * This width should stretch them out to nearly take up the screen. You can then unmaximise the window and change its size to see how the elements respond.   * This width should stretch them out to nearly take up the screen. You can then unmaximise the window and change its size to see how the elements respond.
  
 [[en:web_development:layout:php|Next: Maintaining Consistency with PHP]] [[en:web_development:layout:php|Next: Maintaining Consistency with PHP]]
en/web_development/layout/padding_margin.1639357543.txt.gz · Last modified: 2023/08/16 09:33 (external edit)