How to deal with default padding and margins - html

Question

I am fairly comfortable with html5/css3 now, so I am trying to make a site using same and make it responsive.
So far things are going smoothly except for these two problems:
the use of em i dont understand the calculations at all, especially why i have to put this font: .81em/150% i am following a guide from a tutorial online.
i am having some imaginary padding on my div, you can see it here http://jsfiddle.net/NhZ2A/
e.g. I have on the body:
body{padding:0px; margin:0px;}
Then I have a div with an image like this:
<div id="slider">
<img src="images/slider.jpg"/>
</div>
Then in my css I have:
#slider{
width:100%;
height:auto;
}
#slider img{
width:60%;
height:auto;
}
With the above css I still have padding on the slider div below or maybe it's a margin on the image below.
I don't understand why and its killing me.

Answer 1

For the second issue :
The space is not padding, it is created because the <img> tag is an inline element and therefore has a whitespace use display:block; on the <img> tag to remove it.

Answer 2

Use css resets , To get consistent cross-browser experience,it should be included,any one among these.
Eric Meyer’s Reset CSS
HTML5 Doctor CSS Reset
Yahoo! (YUI 3) Reset CSS
Normalize.css
Get it from here --> http://www.cssreset.com/

Answer 3

Yes, CSS reset is important to set default initial value for each element.
reset.css Source - Reset5
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,audio,canvas,details,figcaption,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,summary,time,video
{
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
margin:0;
padding:0
}
body
{
line-height:1
}
article,aside,dialog,figure,footer,header,hgroup,nav,section,blockquote
{
display:block
}
nav ul
{
list-style:none
}
ol
{
list-style:decimal
}
ul
{
list-style:disc
}
ul ul
{
list-style:circle
}
blockquote,q
{
quotes:none
}
blockquote:before,blockquote:after,q:before,q:after
{
content:none
}
ins
{
text-decoration:underline
}
del
{
text-decoration:line-through
}
mark
{
background:none
}
abbr[title],dfn[title]
{
border-bottom:1px dotted #000;
cursor:help
}
table
{
border-collapse:collapse;
border-spacing:0
}
hr
{
display:block;
height:1px;
border:0;
border-top:1px solid #ccc;
margin:1em 0;
padding:0
}
input[type=submit],input[type=button],button
{
margin:0!important;
padding:0!important
}
input,select,a img
{
vertical-align:middle
}
em - Unit measurement values (1em is equal to the current font-size,same as 2em = 2*font-size)
Font Syntax:
font: font-style font-variant font-weight font-size/line-height font-family;
In your question value .81em/150%
.81em/150% - font-size/line-height

Answer 4

Every browser has a default behaviour and configuration
If you want a clean start from all of them, you must set it with a "reset.css" style sheet, to avoid undesirable behaviours and have all homogeneous.
Check this SO answer to get a proper reset CSS stylesheet:
https://stackoverflow.com/questions/167531/best-practice-for-css-reset-style-sheet

Answer 5

The first choice will be
Css Resets
Most Used Css Reset

Answer 6

JUSR USE CSS RESET
* {
margin:0;
padding:0;
box-sizing:border-box;
}