Not able to create margins in css

Question

Not able to create margins in css

48 Views Asked by py_enthu At 10 May 2022 at 16:41

I am working to create the page mentioned here : https://github.com/jhu-ep-coursera/fullstack-course4/blob/master/assignments/assignment2/Assignment-2.md

going step-by-step to get a good understanding. While I have done the breakpoints part, I am not able to create the right margins between the divs id = section in my code. Can somebody highlight what's wrong here and how can I fix it? Here is the html code. :

* {
  box-sizing: border-box;
  font-family: "Times New Roman", Times, serif;
}
h1 {
  text-align: center;
}
p {
  font-family: Arial, Helvetica, sans-serif;
  /** center the paragraph within its container**/
  width: 90%;
  margin-right: auto;
  margin-left: auto;
  /***/
  color: white;
  padding: 1em;
}

.container {
  width: 100%;
}
#section {
  position: relative;
  border: 1px black solid;
  background-color: gray;
  height: 200px;
}

/** for desktop display ***/
@media (min-width: 992px) {
  .mob,
  .tab,
  .desktop {
    float: left;
  }
  .desktop {
    width: 33%;
  }
}
/*** for tablet display ***/
@media (min-width: 768px) and (max-width: 991px) {
  .mob,
  .tab,
  .desktop {
    float: left;
  }
  .tab {
    width: 50%;
  }
}
/*** for mobile display ***/
@media (max-width: 767px) {
  .mob,
  .tab,
  .desktop {
    float: left;
  }
  .desktop {
    width: 100%;
  }
}

<!DOCTYPE html>
<html>
    <head>
        <title>Module 2 Solution</title>
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel ="stylesheet" href="css/index.css">

    </head>
    <body>
        <h1>Our Menu</h1>    
        <div class = "container">
            <div id = "section" class = "mob tab desktop">
                <p>lorem ipsum dolor sit amet, consectetur
                adipisicing elit, sed do eiusmod tempor incididunt
                ut labore et dolore magna aliqua. Ut enim ad
                minim veniam, quis nostrud exercitation ullamco
                laboris nisi ut aliquip ex ea commodo consequat.</p></div>
            <div id = "section" class = "mob tab desktop">
                <p>lorem ipsum dolor sit amet, consectetur
                adipisicing elit, sed do eiusmod tempor incididunt
                ut labore et dolore magna aliqua. Ut enim ad
                minim veniam, quis nostrud exercitation ullamco
                laboris nisi ut aliquip ex ea commodo consequat.</p></div>
            <div id = "section" class = "mob tab desktop">
                <p>lorem ipsum dolor sit amet, consectetur
                adipisicing elit, sed do eiusmod tempor incididunt
                ut labore et dolore magna aliqua. Ut enim ad
                minim veniam, quis nostrud exercitation ullamco
                laboris nisi ut aliquip ex ea commodo consequat.</p></div>
        </div>   

    </body>
</html>

Original Q&A

There are 3 best solutions below

**Fajar Aji Pamungkas** · Answer 1 · 2022-05-11T01:48:28.353000

you can try changing the pattern in to:

<div>
   <span></span>
   <span></span>
   <span></span>
</div>

<!DOCTYPE html>
<html>
    <head>
        <title>Module 2 Solution</title>
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel ="stylesheet" href="style.css">

    </head>
    <body>
        <h1>Our Menu</h1>    
        <div class = "container">
            <span id = "section" class = "mob tab desktop">
                <p>lorem ipsum dolor sit amet, consectetur
                adipisicing elit, sed do eiusmod tempor incididunt
                ut labore et dolore magna aliqua. Ut enim ad
                minim veniam, quis nostrud exercitation ullamco
                laboris nisi ut aliquip ex ea commodo consequat.</p></span>
            <span id = "section" class = "mob tab desktop">
                <p>lorem ipsum dolor sit amet, consectetur
                adipisicing elit, sed do eiusmod tempor incididunt
                ut labore et dolore magna aliqua. Ut enim ad
                minim veniam, quis nostrud exercitation ullamco
                laboris nisi ut aliquip ex ea commodo consequat.</p></span>
            <span id = "section" class = "mob tab desktop">
                <p>lorem ipsum dolor sit amet, consectetur
                adipisicing elit, sed do eiusmod tempor incididunt
                ut labore et dolore magna aliqua. Ut enim ad
                minim veniam, quis nostrud exercitation ullamco
                laboris nisi ut aliquip ex ea commodo consequat.</p></span>
        </div>   

    </body>
</html>

after that you can add a span to the style.css file, and change width in @media desktop to 30 %

* {
    box-sizing: border-box;
    font-family: "Times New Roman", Times, serif;
  }
  h1 {
    text-align: center;
  }
  p {
    font-family: Arial, Helvetica, sans-serif;
    /** center the paragraph within its container**/
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    /***/
    color: white;
    padding: 1em;
  }
  
  .container {
    width: 100%;
  }
  #section {
    position: relative;
    border: 1px black solid;
    background-color: gray;
    height: 200px;

  }

span {
    margin: 0 10px;
}

span:first-of-type {
    margin-left: 0;
}

span:last-of-type {
    margin-right: 0;
}

  /** for desktop display ***/
  @media (min-width: 992px) {
    .mob,
    .tab,
    .desktop {
      float: left;
    }
    .desktop {
      width: 30%;
    }
  }
  /*** for tablet display ***/
  @media (min-width: 768px) and (max-width: 991px) {
    .mob,
    .tab,
    .desktop {
      float: left;
    }
    .tab {
      width: 50%;
    }
  }
  /*** for mobile display ***/
  @media (max-width: 767px) {
    .mob,
    .tab,
    .desktop {
      float: left;
    }
    .desktop {
      width: 100%;
    }
  }

thank you hope it helps

**CyberRobot** · Answer 2 · 2022-05-11T12:40:58.663000

Let me try and brush up on my rusty CSS. As far as I remember id selectors must be unique, hence you can't have multiple HTML element with the same id. That would be an invalid mark up. CSS selectors on the contrary are designed for grouping HTML elements of similar styles.

To add margin to your sections, instead of having id selectors, add a section class to every section div. Notice, I've removed extra spacing around "=". It's uncommon to use them in HTML.

// HTML

<div class="container">
  <div class="mob tab desktop section">
    <p>lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. Ut enim ad
    minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div class="mob tab desktop section">
    <p>lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. Ut enim ad
    minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div class="mob tab desktop">
    <p>lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. Ut enim ad
    minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>

// CSS

.section {
  position: relative;
  border: 1px black solid;
  background-color: gray;
  height: 200px;
  // Add your desired margin here
  margin-left: 20px;
  margin-right: 20px;
}

You may notice you now have uneven horizontal spaces between sections and sections and their container. If you used 20px left and right margin on the sections, you ended up with 40px between them and 20px between the section and the container. To combat this, introduce extra 20px padding or margin on the container div.

// CSS

.container {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}

**Pinal Sukhadiya** · Answer 3 · 2022-05-11T12:46:06.637000

            #section {
            position: relative;
            border: 1px black solid;
            background-color: gray;
            height: 200px;
            margin-right: 15px;
        }
        .desktop {
            width: 31%;
        }

please do this in your css

Not able to create margins in css

There are 3 best solutions below

Related Questions in HTML

Related Questions in CSS3PIE

Trending Questions

Popular # Hahtags

Popular Questions