-->

Margin doesn't work? Need space between two el

2019-06-27 10:25发布

问题:

First of all, I do apologize I don't put my link here, it's a site for work and I'm not allowed. I'll post the relevant parts of my code if necessary though.

So the problem is pretty basic - i have one div with some images, and a header <h3> below where my content starts . No matter how much I try to create some space between the two, it doesn't work. I've tried margin and padding on both elements, changing between position relative and absolute, and throwing in lots of <br> tags. Nothing works!

What causes my two elements to be so attracted to each other? What may cause inability to create space between two elements?

Thanks!

Edit: here's my css code for the div:

.bmwrapper {
    width: 720px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
}

.bmvenstre {
    float: left;
    text-align: left;
    z-index: 1;
}

.bmhoyre {
    float: right;
    text-align: left;
    z-index: 1;
}

So it's one big div that acts as a wrapper, and two divs (left and right) inside. The links are displayed as blocks:

a.bmlink {
    display: block;
    margin: 0;
    padding: 4px;
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #08A;
    text-decoration: none;
    z-index: 2;
}

The header below this div is just a <h3> tag, then there's some text. Hope this helps!

回答1:

You can try 2 things:

1) Put the elements overflow:hidden

2) put the elemnts display:block

If number 2 messes up with your design, try putting them float:left;

Since I don't have the code I can't give you more information, but when margins/paddings do not work, it is usually because you are either applying it to an Inline item (hence number 2) or you have a container where everything inside is floating, so the container won't have the proper height (hence number 1)



回答2:

Sounds like margin collapse. Here are a couple of ways you could solve this:

Give your content div a transparent border or give your content div the css declaration of overflow: auto;

Some people when they give it a 1px border they also give it a -1px margin to counter the border.