Layout ng CSS - Width at max-width

Gamit ang width, max-width at margin: auto;

Tulad ng ibinalita sa nakaraang kabanata, ang bloke na elemento ay laging sumasakop sa buong magagamit na lapad (sa pinakamalawak na maaari itong sumapit sa kanan at sa kaliwa).

Itakda ang lapad ng bloke na elemento width Ito ay magiging mapipigilan na sumapit sa gilid ng kanyang konteyner. Pagkatapos, maaari mong itakda ang margin na auto upang itama ang elemento sa kanyang konteyner sa pagitan ng dalawang kalagitnaan. Ang elemento ay maglulupain ang tinukoy na lapad, at ang sobra na espasyo ay magiging pantay-pantay sa pagitan ng dalawang margin:

Ang lapad ng elemento ng <div> ay 500px, ang margin ay itinakda na auto.

Babala:Kapag ang lapad ng window ng browser ay mas maliit kaysa sa lapad ng elemento, ang ito <div> will cause problems. The browser will add a horizontal scrollbar to the page.

In this case, using max-width This can improve the browser's handling of small windows. This is very important to make the website usable on small devices:

The maximum width of this <div> element is 500px, and the margin is set to auto.

Tip:Please adjust the size of the browser window to less than 500 pixels to see the difference between the two divs!

This is an example of the two divs above:

Example

div.ex1 {
  width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}
div.ex2 {
  max-width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

Try It Yourself