Margin-Bottom Not Working

margin-bottom not working

Give the containing box position:relative; and give the links position:absolute; bottom:10px; right:20px. See https://jsfiddle.net/Ltnmv/.

margin-bottom not working on divs

Change your CSS for the image containers to display: inline-block; instead of display: inline;

This question has been asked before, and has been answered here: https://stackoverflow.com/a/8782644/3781678

Margin-bottom of h1 not working

The issue is the following:

Anchor tags can be used as buttons but <a> is different than <button>. And here, the orange highlighter depicting the margins of the <h1> sticks to the top of the text in <a>, instead of its top border, because it has border around it to make it look like a button, but semantically it is not a button.

To show the difference, just changing the <a> to <button> will shift downwards due to <margin-bottom> of <h1>.

Edit: From the comment of UncaughtTypeError User.

The issue is actually with the display type properties of the buttons in question, by default anchor tag elements (a) are computed as display: inline, this should be updated to display: inline-block to attribute block type properties to the elements (like margin values).

Why does margin-bottom not work with tr?

Table elements do not have margin - you can use padding-bottom here. Another thing is you need to apply it to the td or th element.

See demo below:

tr > td {  padding-bottom: 100px;}

<table>  <thead>    <tr>      <th>School Name</th>      <th>State</th>      <th>League</th>      <th>Division</th>    </tr>  </thead>  <tbody>    <tr>      <td>School1</td>      <td>State1</td>      <td>League1</td>      <td>Division1</td>    </tr>    <tr>      <td>School1</td>      <td>State1</td>      <td>League1</td>      <td>Division1</td>    </tr>  </tbody></table>

Margin-bottom not working in flexbox

Remove the height declaration from the flex item (also a nested flex container):

.middle {
    display: flex;
    flex-flow: column wrap;
    order: 2;
    width: 45%;
    /* height: 100%;  <-- REMOVE */
}

This is overriding the default align-items: stretch on the container, which will naturally give the element full height.

Because you're using height: 100% improperly, it's not working as you expect. It's computing to height: auto (content height) because you haven't specified a height on the parent. Hence, there was no space available for the <p> elements to move further away. Just get rid of it. Flex height is simpler and easier.

Then, to space the <p> elements away from the header, use a flex auto margin.

.bspace {
    margin-bottom: auto;  /* previous value `50px` in your code */
}

Alternatively, you could use margin-top: auto on the first <p>, which will have the same effect.

.container {  display: flex;  position: relative;  flex-wrap: wrap;  justify-content: flex-start;  align-items: stretch;  min-height: 70vh;  width: 70%;  margin: 5% auto 8% auto;  background-color: lightyellow;}.container p {  margin-bottom: 2%;}.container h2 {  color: orange;  font-size: 34px;}.middle p:first-child {  margin-top: 8%;}.bspace {  /* margin-bottom: 50px; */  margin-bottom: auto;  /* new */}.box h2 {  color: orange;  text-align: center;}.left {  display: flex;  flex-flow: row wrap;  align-items: center;  justify-content: space-around;  order: 1;  width: 30%;  border: 1px dashed red;}.middle {  display: flex;  flex-flow: column wrap;  order: 2;  width: 45%;  /* height: 100%; */  border: 1px dashed green;}

<div class="container">  <div class="left">    <img src="home.jpg" alt="Picture of kid">    <img src="catering.jpg" alt="Picture of kid">  </div>  <div class="middle">    <h2 class="bspace"> Some Text </h2>    <p>Sample</p>    <p>Sample</p>    <p>Sample</p>    <p>Sample</p>  </div></div>

setting margin-bottom on div not working

Your code is over-constrained because you specify definite lengths for top, height and bottom.

Two constraints are enough. Don't specify a height, let it be the default auto.

#nav-right {  position: absolute;  top: 120px;  bottom: 140px;  right: 0;  width: 120px;  background: blue;}

<div id="nav-right"></div>

margin-bottom not working on simple layout

You can simply implement this with border 0.5rem.

*{
  margin: 0;
  padding: 0;
}

body {
  background: yellow;
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
}

main {}

section {  
  box-sizing: border-box;
  width: 100wh;
  height: 100vh;
  border: 0.5rem solid yellow;
  background: gray;  
  background-color: grey;
  padding: 10px;
}

<html>
  <body>
    <main>
      <section>Hello Amit Kumar!</section>
    </main>
  </body>
</html>

---

Related Topics