【Q&A】自動的につくmarginやpaddingの正体って?【CSS】

こんにちは、@codeship_techです。

本日の質問がこちら。

htmlとcssを書いてブラウザで表示させたら、paddingやmarginが自分で設定していないのに付いているんですが、どうしたらいいですか?

ということで、WEBデザインについての質問ですね!

hmtlを書いて、cssを書いて、いざブラウザで表示テストしてみると意図しないmarginやpaddingが勝手についてる!ってことありますよね。

それではこちらの質問に答えていきます。

ブラウザはhtml、cssに自動でpaddingやmarginをつけてしまう機能があります。

ブラウザにはchormeやfirefox、IE,safariなど様々なブラウザがありますが、ブラウザによって付け加えられるcssが異なります。

paddingやmarginのみを消したければ、cssファイルに下記の記述を加えることで調整することができます。

* {
padding: 0;
margin: 0;
}

しかし、他にもブラウザごとで自動でつけるcssがあるので、互換性のある表示をさせるためにnomalize.cssがあります。

nomalize.cssは下記のリンクからダウンロードして使いましょう!
http://necolas.github.io/normalize.css/

本日は、WEBデザインの基本であるnormalize.cssをご紹介しました。

授業日記についてのご意見

CodeShipの授業について「こんな事が知りたい・紹介して」というご意見・ご提案がありましたら、CodeShip公式Twitterアカウント(【CodeShip】プログラミングスクール)までDMまたはリプライにてお寄せください。