Where's the margin coming from on my elements?

Question

So I'm trying to build a basic layout for my site and I've run into a problem. The problem is some margins that I can't figure out where they're coming from.

index.html:

<!DOCTYPE html>

<html lang="en">
    <head>
        <link href="/css/style.css?v=0.1" type="text/css" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Noto+Serif|PT+Serif" rel="stylesheet">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta charset="utf-8">

        <link rel="icon" href="/images/favicon.png" type="image/png">
    </head>

    <body>
        <div class="wrapper">
            <div class="sidebar">
                <p>sidebar</p>
            </div>
            <div class="main">
                <p>main</p>
            </div>
        </div>
    </body>
</html>

style.css:

/* set defaults */

html, body, div {
    background-color: white; /* Was #eee or #ccc */
    /*font-size: 16px;*/
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    color: white;
    font-family: 'PT Serif', serif;
    /*font-family: 'Noto Serif', serif;*/
    box-sizing: border-box;
}

.wrapper {
    width: 100%;
    max-width: 1200px;
    height: auto;
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
}

.main {
    width: 80%;
    height: 100px;
    color: white;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background-color: black;
    display: inline-block;
}

.sidebar {
    width: 20%;
    height: 100px;
    color: black;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background-color: lightgrey;
    display: inline-block;
}

p {
    margin: 0;
    padding: 0;
}

So when I render the page as shown I get:

But when I set the width on the sidebar to 19% I get:

As you can see I'm getting some margins to the right of both elements. I have no idea where this is coming from and the inspector is telling me I have no margins! Margin, padding, border and outline are all set to zero so I have no idea where this is coming from. Is there something I'm missing?

Edit: I should have said I'm trying to get the elements to display next to each other without wrapping.

Take a look at https://stackoverflow.com/questions/5078239/how-do-i-remove-the-space-between-inline-block-elements -- the issue is with using `inline-block` with the space between — skovy, Sep 25 '19 at 03:06

score 0 · Answer 1 · answered Sep 25 '19 at 03:03

Actually here you are not getting the margin issue when you have two elements that has width:19% and width:80%, the remaining width:1% gets the gap that you mentioned as margin.

Simply set float:left; to both sidebar and main classes that avoid the margin issue. No need to change the width.

html,
body,
div {
  background-color: white;
  /* Was #eee or #ccc */
  /*font-size: 16px;*/
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  color: white;
  font-family: 'PT Serif', serif;
  /*font-family: 'Noto Serif', serif;*/
  box-sizing: border-box;
}

.wrapper {
  width: 100%;
  max-width: 1200px;
  height: auto;
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
}

.main {
  width: 80%;
  height: 100px;
  color: white;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background-color: black;
  display: inline-block;
  float: left;
}

.sidebar {
  width: 20%;
  height: 100px;
  color: black;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background-color: lightgrey;
  display: inline-block;
  float: left;
}

p {
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link href="/css/style.css?v=0.1" type="text/css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Noto+Serif|PT+Serif" rel="stylesheet">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta charset="utf-8">

  <link rel="icon" href="/images/favicon.png" type="image/png">
</head>

<body>
  <div class="wrapper">
    <div class="sidebar">
      <p>sidebar</p>
    </div>
    <div class="main">
      <p>main</p>
    </div>
  </div>
</body>

</html>

Casper · Accepted Answer · 2019-09-25T03:43:24.353

Reason for this beacuse inline elements respect the word spacing between divs in the html. The space between first and second create an actual gap that you can see on the page.

You can easily remove this by removing the space between inline divs in the html.

div {
    display: inline-block;
    width: 50%;
}

<div style="background: green">Width: 50%</div><div  style="background: red">Width: 50%</div>

But I hope this is not you are expecting, do not worry there are some otherways as well :)

font-size: 0; gap between the two divs is due to word spacing therefore adding font-size: 0 to the parent container will remove the gap between the two divs.

.wrapper {
   width: 100%;
   font-size: 0
}

div {
   display: inline-block;
   width: 50%;
}

<div class='wrapper'>
   <div style="background: green; font-size: 14px" class="sidebar">Width 50%</div>
    <div style="background: red; font-size: 14px" class="main">Width 50% </div>
</div>

display: flex this method only suppport IE > 10 versions, you can apply display: flex to the parent container and apply relavent widths accordingly to child divs.

.wrapper {
  display: flex;
}

.main {
   width: 80%
}

.sidebar {
  width: 20%
}

<div class='wrapper'>
    <div style="background: green" class="sidebar">Width 20%</div>
    <div style="background: red" class="main">Width 80% </div>
</div>

Thanks for the answer. I did find deleting the return between the closing tag of one div and the opening tag of the next fixed the issue. — timgrindall, Sep 25 '19 at 03:36

score 0 · Answer 3 · answered Sep 25 '19 at 03:24

0

You have forgot to add the float. Please add the following css to your css so that it wont take margin

.sidebar, .main{ float:left; }

answered Sep 25 '19 at 03:24

J. Shabu

1,013
9
22

score 0 · Answer 4 · answered Sep 25 '19 at 04:33

0

if you usnig float:left instead of display: inline-block; your margin will remove

answered Sep 25 '19 at 04:33

Satinder Preet

11
3

Where's the margin coming from on my elements?

4 Answers4