Where do you put your CSS Margins? [closed]

后端未结

关注

 9  1770

伪装坚强ぢ

相关标签:

9条回答

[愿得一人]

2021-02-12 20:55

I tend to agree with you that the first option is better. It's generally what I like to do. However, there is an argument to be made that you should specify a margin for each one of those elements and zero it out if you don't want to apply it since browsers all handle margins differently. The <p> (and the <h1> tag too I think) will usually have default margins given by the browser if none are specified.

0 讨论(0)
发布评论:

提交评论
- 加载中...
慢半拍i

2021-02-12 20:56
I tend to use a bottom margin on elements when I want them to have space before the next element, and then to use a ".last" class in the css to remove the margin from the last element.
```
<body>
  <h1>This is the heading</h1>
  <p>This is a paragraph</p>
  <h1>Here's another heading</h1>
  <div class="last">This is a footer</div>
</body>
```
```
div { margin-bottom: 1em; }
p { margin-bottom: 1em; }
h1 { margin-bottom: 1em; }
.last {margin-bottom: 0; }
```
In your example though, this probably isn't that applicable, as a footer div would most likely have it's own class and specific styling. Still the ".last" approach I used works for me when I have several identical elements one after the other (paragraphs and what-not). Of course, I cherry-picked the technique from the "Elements" CSS framework.
0 讨论(0)
发布评论:

提交评论
- 加载中...
囚心锁ツ

2021-02-12 20:56
This going to be driven partly by the specifics of what you're designing for, but there's a sort of rough heirarchy to these things in, say, a typical blog index:
- You're going to have one footer on a page.
- You're going to have one header per entry.
- You're going to have n paragraphs per entry.
Establish whitespace for your paragraphs knowing that they're going to sometimes occur in sequence -- you need to worry about how they look as a series. From there, adjust your headers to deal with boundaries between entries. Finally, adjust your footer/body spacing to make sure the bottom of the page looks decent.

It's a thumbnail sketch. How you ultimately end up assigning your padding is entirely up to you, but if you approach it from an bottom-up perspective you'll likely see less surprises as you tweak first the most common/plentiful elements and then later the less common ones.
0 讨论(0)
发布评论:

提交评论
- 加载中...
走了就别回头了

2021-02-12 21:01
Using advanced CSS 2 selectors, another solution would be possible that does not rely on a class last to introduce layout info into the HTML.

The solution uses the adjacent selectors. Unfortunately, MSIE 6 doesn't support it yet so reluctance to use it is understandable.
```
h1 {
    margin: 0 0 1em;
}

div, p, p + h1, div + h1 {
    margin: 1em 0 0;
}
```
This way, the first h1 won't have a top margin while any h1 that immediately follows a paragraph or a box has a top margin.
0 讨论(0)
发布评论:

提交评论
- 加载中...
执念已碎

2021-02-12 21:02
This is how it should be done:
```
body > * {
    margin-bottom: 1em;
}
body > *:last-child {
    margin-bottom: 0;
}
```
Now you don't have to worry about what element is first and what element is last, and you don't have to always place a special class on your last element.

The only time this won't "work" is when the last child is one that is not rendered. In this situation you might consider applying margin-bottom:0; using a class on your last visible child.
0 讨论(0)
发布评论:

提交评论
- 加载中...
南笙

2021-02-12 21:07
If you want some space around an element, give it a margin. That means, in this case, don't just give the <h1> a bottom margin, but give <p> a top margin.

Remember, when two elements are vertically adjacent and they don't have a border or padding between them, their margins collapse. That means that only the larger of the two margins is considered - they don't add together. So this:
```
h1, p { margin: 1em; }

<h1>...</h1>
<p>...</p>
```
...would result in a 1em space between the heading and the paragraph.
0 讨论(0)
发布评论:

提交评论
- 加载中...

1 2 下一页

热议问题