CSS content、padding、border、margin属性

原創 NEET007 2020-06-30 09:08

1.content、padding、border、margin的盒子模型图解
这里写图片描述

2.padding

定义元素边框与元素内容之间的空间
设置所有内边距属性

CSS padding简洁写法：

padding:像素值;
padding:像素值1 像素值2;
padding:像素值1 像素值2 像素值3 像素值4;

3.内外距离区别
padding就是内容与边框的空隙。而margin则是模块与模块的空隙

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

使用HTML+CSS制作逼真的红色开关

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

海拥(haiyong.site) 2021-12-04 14:03:52

Appium上下文和H5测试(二)

{"type":"doc","content":[{"type":"heading","attrs":{"align":"center","level":2},"content":[{"type":"text","text":"堅持原創輸出

清菡 2020-11-30 20:23:54

基于React+Koa实现一个h5编辑器

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"前言"}]},{"t

徐小夕 2020-11-02 17:18:59

前端开发者们值得了解的 11 项前端技巧

不容錯過的 11 項 HTML/JS/CSS 技巧。 通過以下 HTML/CSS/JavaScript 相關技巧，希望能幫助大家填補一點點關於前端開發方面的知識空白。1.Datalist元素這項 HTML 元素的使用頻率極低，今天我們就要

Daniel Anderson 2020-10-24 07:03:58

CSS语法与规则 — 重学CSS

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockq

三钻 2020-09-30 14:39:01

实战中学习浏览器工作原理 — HTML 解析与 CSS 计算

{"type":"doc","content":[{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null

三钻 2020-09-19 18:08:56

Flash 终将谢幕：微软将于年底停止对 Flash 的支持

近日，微軟宣佈將於今年 12 月終止對 Adobe Flash Player 的支持，屆時，微軟旗下所有瀏覽器都將無法使用 Flash，Adobe 也不會在今年 12 月後發佈安全更新。早在 2017 年，Adobe、Apple、Face

李俊辰 2020-09-15 13:48:56

使用 Golang 和 HTML5 开发一个 MacOS App

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"前言"}]},{"t

郭旭东 2020-08-18 16:13:52

HTML5 canvas组件

canvas簡介 canvas標籤是用來繪製圖像的 canvas本身沒有繪畫的能力，僅僅是圖形的容器，相當於一塊畫板 必須要使用腳本完成繪製：JS canvas繪畫 <!DOCTYPE html> <html lang="

OliGit 2020-07-08 12:27:30

HTML5 03 Canvas介绍

<!doctype html> <html> <head></head> <body> <canvas width="500" height="800" style="background:yellow" id="canvas"

xinyuan_he 2020-07-08 08:58:18

HTML5 05 Canvas实例 闹钟

<!doctype html> <html> <head></head> <body> <canvas id="clock" width="500" height="500"> 您的瀏覽器不支持canvas標籤，無法看到時鐘

xinyuan_he 2020-07-08 08:58:18

HTML5 04 表单

<!doctype html> <html> <head></head> <body> <form action="http://localhost/test.php" method="post" id="register"></

xinyuan_he 2020-07-08 08:58:18

HTML5 02 音视频介绍

<!doctype html> <html> <head></head> <body> <!--<video src="movie.webm" controls="controls"> 您的破瀏覽器都是古董早該換了，不然休想

xinyuan_he 2020-07-08 08:58:06

HTML5之启动篇-检测浏览器是否支持HTML5与第一个H5程序

通過編寫javaScript瞭解瀏覽器是否支持HTML5與第一次編寫HTML5 的Hello world程序 //觸發標準模式 <!DOCTYPE html> <html> <head> //charset=gb2312 字符

飘雨树 2020-07-08 07:38:48

为什么要用声明

實例： 我們經常會看到類似這樣的代碼： [html] view plain copy <!DOCTYPE html>   <html>   <head>   <title>文檔的標題</title>   </he

java专栏 2020-07-08 03:00:54