简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

css中margin和padding的区别_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 11:48:28
Original
1448 people have browsed it

写在前面

这几天一直在整理面试中遇到的问题，其中一个就是margin与padding的区别。当时说的虽然说出要点了，但是心里还是有点疑惑，所以就又查了查。结合之前整理的内容，深入的研究了下。

[HTML/CSS]盒子模型，块级元素和行内元素

[HTML/CSS]margin属性用法

区别

①margin:是外间距,padding:是内边距。例如现在有两个2mX2m的房子、房子与房子是有距离的。现在你坐在其中一个房子的中间，这时，你与你所在房子的墙之间就有了个距离。我们可以理解为CSS的padding。而你所在房子与另一个房子之间的距离就是margin.

②打个比方,在桌子上放了一个盒子,盒子里放了一个东西!把这个盒子看成是你的那个元素或者说是DIV,那么这个盒子离里面的东西的距离就是padding,而这个盒子里桌子边缘的距离,就是margin!

③

www.soojs.com
padding-top:是www.soojs.com距div的高度 margin-left:是div距body的宽度。

总结

考察的css中margin和padding的区别，通过对比，就比较容易分清了。

Related labels：
css中margin和padding的区别
source：php.cn
Previous article：gulp-css-spriter 将css代码中的切片图片合并成雪碧图_html/css_WEB-ITnose Next article：将页面背景色改为红色_html/css_WEB-ITnose
Statement of this Website
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
Latest Articles by Author
Latest Issues
Is there a way to force the text in the flexbox to be vertically centered, no matter what other CSS code we have? I have the following CSS code that is part of a larger CSS code used in a website I'm deve...
From 2024-04-06 20:41:51
0
1
518
CSS bottom border on navigation bar I have a navigation bar and I have added a red line at the bottom when any item in the lis...
From 2024-04-06 15:04:41
0
2
347
How to remove the space below each line on the Tic-Tac-Toe board in Next.js using CSS? Why is there a space below each line? (CSS) I'm trying to make a Next.js tic-tac-toe app t...
From 2024-04-05 11:39:02
0
1
1431
WooCommerce Checkout - Validate user roles and cart contents I'm having a challenge with WooCommerce's checkout process. I use the "B2BforWooComme...
From 2024-04-03 11:58:52
0
1
475
How to search title and use another column to check uniqueness I have some scraped product data in the database and I want to use it on my website. I wan...
From 2024-04-02 21:49:55
0
1
375
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！