[HTML-CSS] Problem z szablonem mailowym, przerwa przy dwóch borderach. (Opis)

Question

Witam.

 

Otóż tworzę sobie szablon maila, do wysłania (takie jakie się dostaje z firm). Tak wygląda mój kod:

<div id="wrapper">
    	<div id="header" style="background-color: #7dc9f2; width: 100%; height: 30px; border-bottom: 2px solid #5f5ce8; border-radius: 15px 15px 0px 0px; font-family: Verdana, sans-serif; text-align: center;padding-top: 5px">
            <b>Header text</b>
        </div>   
    	<div id="content" style="background-color: white; width: 100%; height: 100%; border: 2px solid #5f5ce8; border-radius: 0 0 15px 15px; border-top: 0;font-family: Verdana, sans-serif; text-align: center; ">
        </div>
</div>

I wygląda to tak: https://i.imgur.com/M1fVNWN.png

Nie wiem dlaczego jest ta przerwa :/. 

 

Z góry dzięki za pomoc.

 

Pozdrawiam.

Answer 1

Witam,
przerwa pojawia się dlatego, że drugi div ma mieć width:100% plus jeszcze dodajesz mu border. Aby przeglądarka uwzględniła border do szerokości trzeba zastosować właściwość box-sizing: border-box.

Przy okazji staraj się nie stosować CSS jako inline (zwłaszcza, jeśli masz aż tyle). Stosuj CSS w sekcji nagłówkowej albo najlepiej w oddzielnym pliku.

Comments

Dzięki.