How to Remember in CSS That Margin Is Outside the Border, and Padding Inside

How to remember in CSS that margin is outside the border, and padding inside

When working with CSS finally drives you mad the padded cell that they will put you in has the padding on the inside of the walls.

How to remove margin space around body or clear default css styles

body has by default 8px margins: http://www.w3.org/TR/CSS2/sample.html

body { 
    margin: 0;   /* Remove body margins */
}

Or you could use this useful Global reset

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

If you want something less * global:

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

some other CSS Reset:

http://meyerweb.com/eric/tools/css/reset/

https://github.com/necolas/normalize.css/

http://html5doctor.com/html-5-reset-stylesheet/

…

what's the difference between padding and margin?

Padding is the space INSIDE an element (inside the border of the element).

Margin is the space OUTSIDE(Around) an element.

Remove all padding and margin table HTML and CSS

Try to use this CSS:

/* Apply this to your `table` element. */
#page {
   border-collapse: collapse;
}

/* And this to your table's `td` elements. */
#page td {
   padding: 0; 
   margin: 0;
}

How to combine inner element border with outer element border?

Consider declaring a width property with a calc^{Ref - calc() MDN} function to offset by 3px (or at a value that suits any requirement).

Remember to declare box-sizing: border-box^{Ref - box-sizing MDN} in addition; to indicate to the browser to account for any border and padding in the value specified for width and height.

Example:

.inner {
    margin-top: 15px;
    margin-bottom: 5px;
    padding: 2px;
    background-color: rgba(0,0,0,0.1);
    border-right: 3px solid red;
    flex-grow: 1;
    width: calc(100% + 3px); /* + value equal to the width of containing border*/
    box-sizing: border-box;
}

Code Snippet Demonstration:

#main {  display: flex}
.out {  height: 50px;  border-right: 3px solid green;}
.inner {  margin-top: 15px;  margin-bottom: 5px;  padding: 2px;  background-color: rgba(0, 0, 0, 0.1);  border-right: 3px solid red;  flex-grow: 1;  width: calc(100% + 3px); /* + value equal to the width of containing border*/  box-sizing: border-box;}

<div id="main">  <div class="out">    <div class="inner">      content    </div>  </div>  <div class="out">    <div class="inner">      content    </div>  </div>  <div class="out">    <div class="inner">      content    </div>  </div></div>

Why isn't border-spacing adding padding around my TABLE element?

border-collapse will prevent padding from being applied to your table element. I think you'll be fine using border-spacing: 0; and dropping border-collapse.

I'm assuming you're wrapping your table in a DIV with a background color because you want to create a band of color across the page, rather than simply adding a background color to a table alone.

You have a few options with your approach to add space before and after the table.

1. Use padding on the table.

div {  background-color: orange;}
table {  margin: 0 auto;  padding: 3rem 0;  border-spacing: 0;}

<div>  <table>    <tr>      <th>Alpha</th>      <th>Bravo</th>    </tr>    <tr>      <td>1</td>      <td>2</td>    </tr>    <tr>      <td>3</td>      <td>4</td>    </tr>  </table></div>

Padding from outside table border line

Im not 100% sure what you mean but you may want this.

HTML:

<table>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
</table>

CSS:

body {
    padding: 20px;
}
table {
    width: 400px;
    height: 400px;
    outline:2px solid red;
    outline-offset: -15px;
}
td {
    border:2px solid blue;
}

Table only:

DEMO HERE

Cell only:

DEMO HERE

So here we are setting an outline and you can put an outline-offseton it. So this will bring it into the table if you use - value. Use it as a border but remember it doesn't count towards width or height.

Note: You can use this on each cell etc.

How do nested vertical margin collapses work?

Two-ish rules to remember:

1. If margins touch, they collapse.
2. Nested items "snuggle" if only margin separates them.
3. Elements outside the "Flow" behave differently. That is, this behavior does not apply the same to floated, or position:fixed, or position:absolute elements.

So for this HTML (nested divs) :

<div id="outer"> 
    <div id="inner">
        A
    </div>
</div> 

and this initial CSS:

#outer {
    margin-top:10px;
    background:blue;
    height: 100px;
}
#inner {
    margin-top:20px;
    background:red;
    height: 33%;   
    width: 33%;
}

The margin collapses to the max of the touching margins and the nested div "snuggles" to the start of the container, like so: (See it at jsFiddle.)

But, the moment the two margins are separated -- by a border or by preceding content in the container, for example -- the margins no longer touch, so they no longer collapse.

EG, just a little, non-breaking white-space , like so:

<div id="outer"> 
    <div id="inner">
        A
    </div>
</div>

kills the collapse : (See that at jsFiddle.)

Using a border, instead of leading text : (Fiddle)

---

Related Topics