search

adobe / brackets

An open source code editor for the web, written in JavaScript, HTML and CSS.
http://brackets.io
MIT License
33.24k stars 7.62k forks source link

Default Margin #12425

Open aosmond3 opened 8 years ago

aosmond3 commented 8 years ago

In the live preview feature of brackets, all of my elements have a top margin of 10px. I can eliminate this margin by setting the margins to -10px, but margin: 0px; does not work. I am new to programming and i am wondering if this is something in settings or just a bug.

petetnt commented 8 years ago

Hi @andrewosmond,

there are some elements in HTML that contain default margins (such as <h1>-<h6> and <p>) but no margins are inserted automatically by Brackets. Can you provide some code that has unexpected margins?

aosmond3 commented 8 years ago

<p id="first"><span class="top" id="address">10304 Partnership Court, Williamsport, MD 21795</span><span class="top">301-223-9444</span></p> <img id="logo" src="DCCasework%20Logo.gif" alt="DCCasework Logo">

aosmond3 commented 8 years ago

@petetnt The body element has a top margin of 10px. The p element has a bottom margin of 10px and the has a top margin of 10px. Setting margin: 0px; does not work. Margin: -10px; does work.

petetnt commented 8 years ago

@andrewosmond The <p> element has 1em margins on both top and bottom by default on at least Chrome and Safari (I think on Firefox it might have only the bottom one).

See the following fiddle: https://jsfiddle.net/4eqvb46d/ where the default margins are removed from the second <p>-tag.

There's utilities such as Normalizer which normalises these behaviours across browsers.

aosmond3 commented 8 years ago

@petetnt How exactly did you remove the margins from the second <p>-tag? Also, these margins occur for every element (e.g. there is a 20px space between the body element and the actual top of the page. I'm in 9th grade and i haven't taken a programming class before so i appreciate the help.

redmunds commented 8 years ago

I seem to remember that Live Preview injects a margin to have a place to display error messages, but I couldn't find where that's done with a quick look at the code. As long as your page looks ok in normal browser, then I wouldn't worry about it.

petetnt commented 8 years ago

@redmunds Checked it out, no default margins for anything by default 🎉

@andrewosmond I used an id CSS selector #second to target the second p-element, and set that p-elements margins to 0.

#second {
  margin-top: 0;
  margin-bottom: 0;
}

Developers tools that ship with most browsers are a super valuable tool for new learners like yourself. Check out Google Chromes one for example: https://developer.chrome.com/devtools

Then if we have this really simple page:

<!doctype html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <p>Test</p>
  </body>
</html>

and you open the developer tools, move your mouse over to the <p>-element you can see that it has margins by default (marked in orange):

screen shot 2016-05-19 at 09 21 10

You can also see that <body> element has also some margins:

screen shot 2016-05-19 at 09 22 53

Which you can remove with some CSS 

body {
  margin: 0;
}
p {
  margin: 0;
}

There are utilities that do this for you, like CSS Reset that you can add to your page. The default styles are there to aid you building sites that "flow" by default, so you can have paragraphs and such by just by writing text, so be weary of reseting them completely!