为什么css一开始需要设定margin和padding为 0px?

我们在写HTML的时候,通常会在样式里先写上一些像body、a、ul li等这些标签的全局的一些样式。之所以有这样的习惯,主要是是因为以下几点:

  首先:浏览器兼容。我们做的网页是给用户看的,我们只负责把网页做出来,至于用户怎么使用,在哪种浏览器上使用就不是我们的事情了。但是不同的浏览器他们的margin又不尽相同,所以为了满足这种需求,我们一般都是为body设置他们的margin和padding为0px。当然啦还有其他的解决方式这里不过多讨论。

还有一点,个人觉得挺重要的一点,就是能够减少一些代码量。本人比较懒,一些需求的实现能用一行解决绝不多写一个字母。

其其他的一些作用我做了一个总结,如下:

1、默认的块元素有些会自带margin或者padding。
2、body默认就会有8个像素margin,这样设定后可以清除body的margin。
3、清除这些元素的默认margin和padding后我们自定义的css样式才不会有偏差。
4、同时设置margin为0也有为了居中对其的目的。

当然如果有更好的想法欢迎下方留言。我们是一个安静的程序猿!

原文地址:https://www.cnblogs.com/H-Gfeng/p/10422365.html

时间: 2024-10-24 15:26:14

为什么css一开始需要设定margin和padding为 0px?的相关文章

HTML CSS——margin和padding的学习

你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边距.呵呵呵,刚开始我也有点不理解,后来通过查资料学习总算弄明白了,现在我来谈一下自己对margin和padding的理解: 一.什么是边距 CSS中的边距指的是当前元素border与周围其它元素border的距离(或者称为空间). 二.什么是内边距,什么是外边距 代码2-1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" &

HTML CSS——margin与padding的初学

下文引自HTML CSS——margin和padding的学习,作者fengyv,不过加入了一些个人的看法. 你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边距.呵呵呵,刚开始我也有点不理解,后来通过查资料学习总算弄明白了,现在我来谈一下自己对margin和padding的理解: 一.什么是边距 CSS中的边距指的是当前元素border与周围其它元素border的距离(或者称为空间). 二.什么是内边距,什么是外边距.(用代码来说明) <!DOCTYPE

CSS:你真的懂margin吗?

你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并? margin在块元素.内联元素中的区别?什么时候该用padding而不是margin?你知道负margin吗?你知道负margin在实际工作中的用途吗?常见的浏览器下margin出现的bug有哪些?…… 写css,你少不了与margin打交道,而对于这个平时我们最常用的css属性我们并非十分了解.介于此我打算写下这篇文章,一来是自己工作中的总结,也是对自己知识的一次梳理. Margin是什么 CSS 边距属性

CSS中margin和padding的区别

本文导读:padding margin都是边距的含义,关键问题得明白是什么相对什么的边距.padding是控件的内容相对控件的边缘的边距.margin是控件边缘相对父空间的边距. 在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和margin常用的用法 一.padding 1.语法结构 (1)padding-left:10px; 左内边距 (2)pad

关于css布局中margin,padding在整个布局中使用的一些细节

最近在学习写网页,在用html标记语言和css布局时,发现css布局中的margin,padding会使整个布局变大,最后在研究了css盒模型时找到了答案. 主要原因是margin定义了模块的外边距,padding定义了模块的内边距,如果在布局时没有把两块边距像素考虑到整个布局中,并且在父布局里宽高都设置为固定,此时会发生的事情就是:在整个父布局中如果宽度容纳不下子布局,那么子布局会撑出整个父布局,例如: <div id="container"> <div id=&q

css中margin和padding的用法区别

谈到css中的margin和padding这两个我们几乎每个页面都会用到的属性,我们有必要先来了解一下margin和padding 1.什么是margin和padding 谈到margin和padding我们就有必要了解一下css盒模型 (Box Model) 根据上面的这张图我们可以很清晰的看到,margin用来设置外边距,padding用来设置内边距 啥是外边距和内边距,我们看下w3c上面的官方说明: css外边距: 围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的“空白”.

css部分样式整理-特殊字体格式、导航栏固定、块级元素与行内元素、html 元素的margin与padding默认值、css样式优先级概括等

1.一些特殊字体样式: 首行缩进2字符:{text-indent:2em;} 水平居中:{text-align:center;} 两端对齐:{text-align:justify;} 垂直居中:{vertical-align: middle;} 字间距2字符:{letter-spacing:2em;} 行间距2倍:{line-height:2;}     2.导航栏固定在页面某处(相对于<body>):     {position:fixed;left:  px;top:  px;}  3.块

CSS样式表margin和padding的区别

  用css时,首先要做的是把所有的标签margin和padding都清空.这样更容易控制浏览器的布局和兼容浏览器. 清空方法:*{margin:0; padding:0;}         *是通配符,表示所有标签元素. 常见:{margin:0 auto}(参考例子 2,上下边界为0,左右则根据宽度自适应相等的值(居中))

使用CSS中margin和padding的基础和注意事项

在CSS中,margin和padding是页面布局的主要属性,如何灵活有效使用对于基于DIV+CSS设计网页方法是非常重要的,笔者经常使用且经常误使用,所以根据经验和网上资料整理出切合自己的内容,以备以后使用. 一.首先了解CSS盒模型 Box Model 通过这个CSS盒模型模型就很容易理解Margin.padding和Border.. W3C定义的盒模式如下: width和height定义的是Content部分的宽度和高度,padding border margin的宽度依次加在外面.背景会