开发者

CSS Multiple grouped elements with margins

开发者 https://www.devze.com 2023-04-09 03:04 出处:网络
Take this HTML: <div> <div class=\"block\">Hello</div> <div class=\"block\">Hello</div>

Take this HTML:

<div>
    <div class="block">Hello</div>
    <div class="block">Hello</div>
    <div class="block">Hello</div>
    <div class=开发者_JAVA技巧"block">Hello</div>
</div>

With the companion CSS:

div.block
{
    float: left;
    width: 100px;
    height: 100px;
    margin: 1px;
    background: red;
}

The result of this is four blocks, which have between them 2 pixels of space (1px from the right margin of the left block and 1px from the left margin of the right block).

Is there a way that I can achieve a similar effect to border-collapse? ie. I want there to be only one pixel of margin between adjacent blocks.

This is a basic example of often more complex situations that I run into, and I don't want to get around it by by anything similar to only setting margin-left to 1 pixel etc.


There are multiple ways to this

One of them is

div.block
{
    float: left;
    width: 100px;
    height: 100px;
    margin: 1px 1px 1px 0;
    background: red;
}
div.block:last-child {
    margin: 1px 0 1px 0;
}

Another is

div.block+div.block { margin-left: 1px; }

You can check the demo of both way here


How about using the CSS selector :first-child and :last-child to alter the first and last <div>?

div.block
{
    float: left;
    width: 100px;
    height: 100px;
    margin: 2px 1px 2px 0;
    background: red;
}
div.block:first-child {
    margin-left: 2px;
}
div.block:last-child {
    margin-right: 2px;
}


If you can alter the markup itself, then I guess we can have a cross browser compatible solution:

<div class="block"> <div class="block_2"></div> </div>

and then apply the css like:

div.block{float: left; width: 100px; height: 100px; }
div.block_2{width:99px; height:100px; background-color:red}


Assign a class for last block called 'last'. The set margin-right of every block to 1px. Set margin-right of block that has last class to 0. .block.last { margin-right: 0px; }

Pseudo selectors like forst-child and last-child are not well supported so I think this is the best option you have.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号