Same code but different result, why is that?

<!DOCTYPE html> <html> <head> <title>Sololearn</title> <style> div.ex1 { width:500px; margin: auto; border: 3px solid #73AD21; } div.ex2 { max-width:500px; margin: auto; border: 3px solid #73AD21; } </style> </head> <body> <div class="ex1">This div element has width: 500px;</div> <br> <div class="ex2">This div element has max-width: 500px;</div> </body> </html>

html css max_width

10th Feb 2020, 10:22 AM

RH Tasin

4 Réponses

+ 5

Tasin R Hasan it's not the same code. If no width is specified, then the div will fit the page. In the first example, you set the width to 500px, which is why it was larger than the screen width. In the second example, you didn't set any width. Therefore, the div will fit the body, which is only 100px or 200px (on phone). Since 200px is smaller than 500px, then there was no change.

10th Feb 2020, 10:47 AM

Aymane Boukrouh