*{margin: 0; padding: 0; outline:0;} why we use it in the top of our css file?

+7 votes
asked Dec 9, 2015 in CSS by Shumon (7,690 points)
*{margin: 0; padding: 0; outline:0;}

We use this code in the top of our css file. What is the main reason ? Here is a video I saw.

4 Answers

+8 votes
answered Dec 9, 2015 by Delowar (4,950 points)
selected Dec 9, 2015 by Shumon
 
Best answer

This is part of the "CSS Reset" theory which helps keep your designs consistent across browsers, a very good thing. This technique works on all browsers, so I never really considered any negatives.

*{margin: 0; padding: 0; outline:0;} 

The main reason this is used is because sometimes the browser will apply it's default margin/padding to elements, and in a case where you do not want there to be any margin or padding space around an element you will want to define that there is no margin or padding. And outline:0 vanishes the link outlines.

Resets the pages default margin and padding for the entire html file. This will allow you to have more control when you are styling specific elements.

To get better experience try to make a template without this reset code. Then you can be understand about it more clearly. Video link.....

commented Dec 9, 2015 by Shumon (7,690 points)

Thanks a lot. Yes, understand clearly and all of my Section widen more when I do not use it.

+4 votes
answered Dec 9, 2015 by Kamrul (4,880 points)

Yes, It is good. But I use another CSS Reset code.

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,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

These also works fine.

+1 vote
answered Dec 9, 2015 by ali (5,800 points)

You may know that the html5boilerplate provides more CSS Reset code. Yes these are helpful. But *{margin: 0; padding: 0; } are widely used and also popular. Using this code in the stylesheet or css file will not affect performance and is helpful in tackling various formatting issues in your template.

0 votes
answered Jul 23, 2016 by shahidujjamanleon (380 points)

Actually this is the CSS reset code

Related questions

0 votes
2 answers
asked Nov 18, 2015 in CSS by alamin (2,060 points)
0 votes
1 answer
0 votes
2 answers
0 votes
1 answer
asked Nov 18, 2015 in CSS by Kamrul (4,880 points)

722 questions

656 answers

179 comments

4,747 users

Welcome to IDB Scholars Forum, where you can ask questions and receive answers from other members of the community. It's 100% free.
আইডিবি স্কলারস ফোরামে আপনাকে স্বাগত - প্রোগ্রামিং, ডিজাইন, ডেভেলপমেন্ট, ব্লগিং, ইন্টারনেটসহ তথ্য প্রযুক্তির যাবতীয় বিষয় নিয়ে আলোচনার একটি মুক্ত মঞ্চ হলো এই ফোরাম । এখানে আইসিটি বিষয়ক আপনার প্রশ্ন, উত্তর এবং অভিজ্ঞতা শেয়ার করুন, আলোচনা করুন এবং সমাধান নিন। দেশের তরুণ প্রজন্মকে আইসিটিতে আগ্রহী করাই আমাদের মূল লক্ষ্য।
** ইংলিশ বা বাংলা যে কোনো ভাষায় আপনি এই ফোরামে আলোচনা করতে পারবেন। তবে বাংলাকে ইংরেজি অক্ষরে লিখবেন না।
  1. tulbadex

    110 points

    0 answers

  2. JettaQoa3381

    100 points

    0 answers

  3. clutch7conga

    100 points

    0 answers

  4. WhitneyMauer

    100 points

    0 answers

  5. pajamazipper55

    100 points

    0 answers

...