+ 6

Can anyone tell me the problem in this code?

<!DOCTYPE html> <html lang="en"> <head> <style> body { margin: 0; padding: 0; } .container { margin: 0; background-color: #42a02c; width: 100vw; height: 100vh; padding: 10px; /* padding: 10px;*/ } .field{ padding: 0; box-sizing: padding-box; width: 95vw; height: 95vh; border: 1px solid #fff; } </style> </head> <body> <div class="container"> <div class="field"> </div> </div> </body> </html> With this I'm having trouble in layout. The box is overflowing. I want the field div to be centered vertically and horizontally in the container div. Please help guys

html css problem help

8th Mar 2017, 2:59 PM

Chirag Bhansali

3 odpowiedzi

+ 6

Thanks all. @Yaroslav: That fixed my problem :)

9th Mar 2017, 2:56 AM

Chirag Bhansali

+ 1

I believe fields default margin causing the problem.You should overwrite it

8th Mar 2017, 3:04 PM

fine bug

+ 1

.container { margin: 0; background-color: #42a02c; width: 100vw; height: 100vh; padding: 2.5vh 2.5vw; box-sizing: border-box; } .field{ width: 95vw; height: 95vh; border: 1px solid #fff; box-sizing: content-box; }

8th Mar 2017, 4:22 PM

Yaroslav Pieskov