search
HomeWeb Front-endCSS TutorialThe difference between Class and ID, the difference between margin and padding CSS study notes_Experience exchange

the difference between class and id, the difference between margin and padding, css study notes_experience exchange

since 99.99% of cms now use p css to build web page templates , i was forced to have no choice but to learn css at an advanced age. to be honest, i don’t think using p for layout is any better than table! but due to the current situation, let’s just bite the bullet and see how much we can learn.
according to the principle of separation of data and structure, it is best for css to be independent of web page files. use the

<link rel="stylesheet" type="text/css" href="../xxx/web.css" />

statement to transfer css files into web page files. it is not recommended to write css code directly in web page files. the advantages of this are that it is easy to modify, and it is friendly to search engines, so those search engine crawlers can crawl easily.


margin and padding attributes
the margin and padding attributes can be simply understood as the outer margin and inner margin of the element:

margin-top, 
margin-right, 
margin-bottom, 
margin-left, 
padding-top, 
padding-right, 
padding-bottom and padding-left

the difference between class and id
to put it simply, an id name can only appear once in a page and class can appear multiple times. of course, if an id name appears twice in a page , it has no impact on the appearance of the opposite page, except that it does not comply with w3 specifications. single elements, or things that require program or js control, need to be defined with id; reused elements are defined with class.

the above is the difference between class and id, the difference between margin and padding, css study notes_experience exchange content, for more related content, please pay attention to the php chinese website (www.php.cn)!


Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
CSS 边界属性详解:padding,margin 和 borderCSS 边界属性详解:padding,margin 和 borderOct 21, 2023 am 11:07 AM

CSS边界属性详解:padding,margin和borderCSS是一种用于控制和布局网页元素的样式表语言。在网页设计中,边界属性是其中一项非常重要的部分。本文将详细介绍CSS中边界属性的使用方法,并提供具体的代码示例。padding(内边距)padding属性用于设置元素的内边距,即元素内容和元素边界之间的空间。我们可以用正数或百分比值来设置内边距

margin在css中什么意思margin在css中什么意思Dec 18, 2023 am 10:30 AM

在CSS中,margin是一个用于设置元素外边距的属性。外边距是元素边框与元素内容之间的空间。margin可以接受以下几种值:1、单独的值:例如,margin: 10px; 将所有四个外边距(上、右、下、左)都设置为10像素;2、两个值:例如,margin: 10px 20px; 将上下外边距设置为10像素,左右外边距设置为20像素;3、四个值等等。

margin在html中的意思是什么margin在html中的意思是什么Sep 13, 2021 pm 04:26 PM

在html中,margin的意思为“外边距”,指的是围绕在元素边框的空白区域;设置外边距会在元素外创建额外的“空白”,让盒子与盒子之间有一个“空白”距离。设置外边距需要使用css margin属性,该属性接受任何长度单位、百分数值甚至负值。

CSS 文本排版属性详解:text-overflow 和 white-spaceCSS 文本排版属性详解:text-overflow 和 white-spaceOct 20, 2023 am 11:19 AM

CSS文本排版属性详解:text-overflow和white-space在网页设计中,文本排版是一个非常重要的环节,通过合理的排版可以使文本更易读、更美观。CSS提供了一些属性来控制文本的显示方式,其中包括text-overflow和white-space。本文将详细介绍这两个属性的用法和示例代码。一、text-overflow属性text

css中的padding属性怎么用css中的padding属性怎么用Dec 07, 2023 pm 02:58 PM

在CSS中,padding属性用于设置元素的内边距。这意味着它定义了元素内容和其边框之间的空间。基本语法为“padding: value;”。

margin属性不影响行内元素margin属性不影响行内元素Feb 18, 2024 pm 04:36 PM

Margin对于行内元素的效果是不同于块级元素的。在行内元素中,margin属性只会对垂直方向的上下外边距起作用,而不会对水平方向的左右外边距起作用。举个例子,在HTML中有一个段落元素,我们可以为其设置一些样式,并观察margin属性对其的效果。HTML代码如下所示:

css文件margin什么意思css文件margin什么意思Jan 30, 2023 am 09:34 AM

css文件margin是一个用于定义元素周围空间的css属性;margin表示外边距,可以单独改变元素的上,下,左,右边距,也可以一次改变所有的属性;margin属性接受任何长度单位、百分数值甚至负值。

CSS 盒模型属性探索:padding,margin 和 borderCSS 盒模型属性探索:padding,margin 和 borderOct 20, 2023 pm 03:09 PM

CSS盒模型属性探索:padding,margin和borderCSS盒模型是网页布局的重要概念之一。在前端开发中,了解和正确使用padding,margin和border属性是关键。本文将深入探讨这三个属性的用法和相互之间的关联,并提供具体的代码示例。一、盒模型简介盒模型由四个部分组成:content(内容),padding(内边距),bo

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor