分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

css 内外边距

发布时间:2023-09-06 01:43责任编辑:苏小强关键词:暂无标签

一、边距  

内边距: 边框于内容之间的距离。

外边距:边框于边框之间的距离。

  

二、外边距margin  

Margin的特性

margin始终是透明的。

margin通过使用单独的属性,可以对上、右、下、左的外边距进行设置。即:margin-top、margin-right、margin-bottom、margin-left。

外边距的 margin-width 的值类型有:auto | length | percentage

也可以使用简写的外边距属性同时改变所有的外边距:margin: top right bottom left;(eg: margin:10px 20px 30px 40px) 记忆方式是元素周围正上方顺时针“上右下左”记忆。

并且规范还提供了省略的数值写法,基本如下:

1、如果margin只有一个值,表示上右下左的margin同为这个值。例如:margin:10px; 就等于 margin:10px 10px 10px 10px;

2、如果 margin 只有两个值,第一个值表示上下margin值,第二个值为左右margin的值。例如:margin:10px 20px; 就等于 margin:10px 20px 10px 20px;

3、如果margin有三个值,第一个值表示上margin值,第二个值表示左右margin的值,第三个值表示下margin的值。例如:margin:10px 20px 30px; 就等于 margin:10px 20px 30px 20px;

4、如果margin有四个值,那这四个值分别对应上右下左这四个margin值。例如:margin:10px 20px 30px 40px;

如下: 

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>边距</title></head><body style="margin: 0 auto"> ???<div style="height: 80px; border: 1px solid red"> ???????<div style="height: 30px; background-color: #3A5FCD"> ???????????hero ???????</div> ???</div></body></html>

 

 修改最里面的div的外边距 

 

三、内边距

  修改内边距,内容与边框的距离在改变  

css 内外边距

原文地址:https://www.cnblogs.com/bigberg/p/8461427.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved