CSS---内外边距

2024-04-09 14:40:11

CSS---内外边距

1、内外边距含义

内边距是div边框内的距离。背景色会覆盖内边距，内边距会使宽高变大。

外边距是div边框外的距离。背景色不会覆盖外边距

内外边距都会撑高父元素，外边距会提高div与div之间的距离

2、利用border做三角形

给空div设置

div{
　　width:0;
　　height: 0;
　　border-top: 20px solid red;
　　border-left: 20px solid transparent; # transparent透明
　　border-right: 20px solid transparent;
}

3、margin塌陷：

不浮动时，在文档流里，当给两个兄弟盒子设置垂直方向上的margin，（上面的margin-bottom，下面的margin-top）

他们俩之间的距离不是margin-bottom + margin-top 而是以最大的为准，这种现象叫margin塌陷。

在浮动时，没有塌陷问题，距离是margin-bottom + margin-top （设置父盒子宽度，两个子盒子都向左浮动，父盒子宽度放不下

两个子盒子时，会出现贴靠，这时不会塌陷）

解决方式：尽量使用父元素的padding而不是子元素的margin

4，margin：0 auto

在某个div里写上：1，还必须写上宽度，margin:0 auto 就会水平居中盒子, 2，只有标准流下的盒子才能使用这个。因为auto的意思是“尽可能有最大距离”

上下外边距为0 左右方向尽可能有最大距离就变成了对父盒子居中显示。

这个属性不会继承（继承属性：color font text-* line-*）

如果要让盒子内文字居中就要写：text-align:center

posted on 2018-12-11 01:58 要一直走下去阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/staff/p/10100203.html

CSS---内外边距相关推荐

CSS 内外边距 float positio属性
一.外边距和内边 margin: 用于控制元素与元素之间的距离外边距:margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的. padding: ...
7.css内外边距设置
1.常用写法总结常用属性说明 margin 设置外边距 padding 设置内边距,注意:设置内边距会改变原有容器的大小 2.代码示例 <!DOCTYPE html> <html ...
css边距和填充示例代码,css 内外边距(示例代码)
一.边距内边距: 边框于内容之间的距离. 外边距:边框于边框之间的距离. 二.外边距margin Margin的特性 margin始终是透明的. margin通过使用单独的属性,可以对上.右.下.左 ...
html定义盒子距离顶底端像素,css - 盒子内外边距
css - 边距元素内边距内边距是指元素包含的内容离元素边框之间的间距,内边距不能设负值.内边距(padding).(边框)border都会撑大盒子,在浏览器中显示的元素的尺寸可能包含了盒子的pa ...
css --- [读书笔记] 盒模型(边框、内外边距)
说明源代码学习盒子模型(css重点) css学习三大重点: css盒子模型. 浮动. 定位目标: 能说出盒子模型由哪四部分组成: 内容.边框.内外边距能说出内边距的作用,设置不同数值分别代表 ...
html之CSS设计（文本、边框、列表标签、display设置、内外边距）
文章目录一.文本属性二.边框属性三.列表标签四.display设置五.内外边距本篇文章主要介绍CSS设计中的文本属性.边框边距.列表标签.display的几种用法,还有一个最容易被忽视的点 ...
清除内外边距(HTML、CSS)
清除内外边距(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta charset= ...
CSS边框、边距、轮廓（边框宽度/颜色/各边/简写属性/圆角边框/内外边距/高度宽度/框模型/轮廓宽度/颜色/属性/偏移）——万字长文|一文搞懂
目录 CSS边框 CSS 边框属性 CSS 边框样式实例 CSS 边框宽度实例特定边的宽度实例 CSS 边框颜色实例特定边框的颜色实例 HEX 值实例 RGB 值实例 HSL 值实 ...
2021-04-05 web前端CSS之权重，盒子边框内外边距
视频学习:黑马程序员pink老师笔记:层叠性相同选择器给设置相同的样式--如果样式冲突,就近原则样式不冲突,不会层叠 <!DOCTYPE html> <html lang=&q ...
html盒子左右边框边距,CSS盒子模型、内外边距、边框、行高、背景
1.盒子模型所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margin)组成. ...

最新文章

热门文章