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.

htmlcssresponsive-designfluid-layout

user2666633

Reputation: 340

How to deal with default padding and margins

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.

Upvotes: 1

Answers (6)

Gildas.Tambo

Reputation: 22643

JUSR USE CSS RESET

* { 
  margin:0;
  padding:0;
  box-sizing:border-box;
 }

Upvotes: 0

Jaykumar Patel

Reputation: 27614

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

Upvotes: 1

Vinay Pratap Singh Bhadauria

Reputation: 9947

The first choice will be

Css Resets

Most Used Css Reset

Upvotes: 0

web-tiki

Reputation: 103770

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.

Upvotes: 1