首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

你是否彻底了解margin属性?

…… Margin是什么 CSS 边距属性定义元素周围的空间。通过使用单独的属性,可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。...margin通过使用单独的属性,可以对上、右、下、左的外边距进行设置。即:margin-top、margin-right、margin-bottom、margin-left。...这个问题发生的原因是根据规范,一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。...为了“弥补修复”这个父子垂直外边距合并这个CSS规范“Bug”,而强制在父元素上使用border-top和padding-top,不舒服,也不容易记住,下次再发生这样的情况还是会忘记这条准则,而且在页面设计稿里如果不需要...原理分析:块级对象默认的display属性值是block,当设置了浮动的同时,还设置了它的外边距就会出现这种情况。也许你会问:“为什么之后的对象和第一个对象之间就不存在双倍边距的Bug”?

88720
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    前端学习笔记之CSS属性设置 CSS属性设置

    如果只设置了一个值,另一个值就是50%。  可以混合使用%和position值。...边框 同时设置四条边的边框 border:边框的宽度 边框的样式 边框的颜色 分别设置四条边的边框 border-left:边框的宽度 边框的样式 边框的颜色border-top:边框的宽度 边框的样式...10px 10px 20px; /* 顺时针顺序:上左 上右 下左 下右*/ /* 百分比设置 */border-radius: 50%;/* 椭圆圆弧设置 */border-radius: 25%/...:上 右 下 左; 注意 1 给标签设置内边距后,标签内容占有的宽度和高度会发生变化,设置padding之后标签内容的宽高是在原宽高的基础上加上padding值。...#1、为什么要清空默认边距(外边距和内边距) 浏览器会自动附加边距,在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等 编写代码之前的第一件事情就是清空默认的边距 #2、如何清空默认的边距

    5.9K30

    前端之HTML和CSS

    ,设置包括定义网页的编码格式,外链css样式文件和javascript文件等,设置的内容不会显示在网页上,标题的内容会显示在标题栏,“”内编写网页上显示的内容。   ...:gold; 设置元素背景色为金色 border 设置元素四周的边框,如:border:1px solid black; 设置元素四周边框是1像素宽的黑色实线 以上也可以拆分成四个边的写法,分别设置四个边的...solid pink; padding 设置元素包含的内容和元素边框的距离,也叫内边距,如padding:20px;padding是同时设置4个边的,也可以像border一样拆分成分别设置四个边...margin 设置元素和外界的距离,也叫外边距,如margin:20px;margin是同时设置4个边的,也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right...分别设置的是 上 右 下 左 四个方向的内边距值。

    4.3K30

    CSS

    :设置背景图案 background-size:设置背景图案大小 文本属性 text-align:设置文本的对齐方式 text:indent:设置文本首行缩进 line-height:设置文本的行高...a:link:设置链接为访问时的文本状态 a:visited:设置链接已经访问过的状态 a:hover:设置链接的鼠标激活状态 边框属性 有上下左右和颜色样式宽度各种搭配 border:没有设定方向和修饰属性就是四边加设置颜色宽度样式...border-color:就是全部四边加只设置颜色 border-top:就是全部颜色宽度样式都设置并且只给上面上边框 border-left-style:就是只设置左边且只设置样式 块元素属性...margin外边距与padding内边距 块元素与内联元素 块元素:会独占一行,默认宽度是填充父元素的宽度,高度是内容的高度。...display:inline 块转内 display:inline-block 转成内联块,此元素不仅有块的特性修改宽高边距等还可以同行只要宽度够 浮动:通过设置浮动可以到达同行的效果不用去转内联块

    98320

    阅读Skeleton.css源码,改善睡眠质量(尽管它只有419行代码)

    本文不是推荐大家使用 Skeleton.css ,因为现代工程其实已经用不上这个库了。本文的重点在 响应式布局源码的解读。...*/ box-sizing: border-box; /* 设置容器盒模型,设置了容器的边框、内边距都不会超过容器宽度 */ } /* 当容器不小于400px时 */ @media (min-width...*/ float: left; /* 左浮动 */ box-sizing: border-box; /* 设置容器盒模型,设置了容器的边框、内边距都不会超过容器宽度 */ } @media...{ min-height: 65px; /* 最小高度是65px,会覆盖上面设置的height */ padding-top: 6px; /* 上内边距 */ padding-bottom...solid #E1E1E1; } 上下设置了外边距 清除掉所有border 最后再设置回顶部边框为1px,实线,灰色 清除浮动 Clearing 源码分析 .container:after, .row

    72920

    百度Web前端技术学院(1)-HTML, CSS基础

    如果后代元素没有自己的装饰,祖先元素上设置的装饰会 “延伸” 到后代元素中。不要求用户代理支持 blink。...当您您找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上。 您 “自己的” 的字体是在 CSS3 @font-face 规则中定义的。...参考 清除浮动的几种方法 box-sizing 当你设置一个元素为 box-sizing: border-box; 时,此元素的内边距和边框不再会增加它的宽度。 他们的内边距和边框都是向内的挤压的。...margin-bottom:-10000px; ‘底部边距 - 10000px。 padding-bottom:10000px; ‘底部填充 10000px。...上面这两句能够实现的效果就是,产生 10000px 的填充,然后用负的边距把它给抵销掉。

    1K30

    【Html.js——功能实现】分享点滴(蓝桥杯真题-18555)【合集】

    在我们课程中为大家提供的是 VS Code 在线环境,接下来给大家讲一讲如何使用我们线上的 VS Code 吧!...('textarea') // 设置 textarea 的内容为要复制的文本 textarea.value = text // 将 textarea 元素设置为不可见 textarea.style.position...box-sizing: border-box; 使元素的宽度和高度包含内边距和边框,但不包含外边距,这样在设置元素大小时更容易控制。 2....border-radius: 6px; 给文章添加 6px 的圆角。 background-color: #fff; 设置文章的背景颜色为白色。....my-dialog>.block 类设置对话框的内容区域样式,包括宽度、内边距、圆角和背景颜色。 .block>a 类设置分享链接的样式,包括文字颜色、换行方式和行高。

    10210

    【Web前端】创建我的第一个 Web 表单

    /* styles.css */ body { font-family: Arial, sans-serif; /* 设置全局字体 */ margin: 20px; /* 设置页面边距...auto; /* 居中显示表单 */ padding: 20px; /* 为表单添加内边距 */ border: 1px solid #ccc; /* 添加边框 */ border-radius...{ width: 100%; /* 输入框和文本区域宽度充满父容器 */ padding: 10px; /* 内边距,增大可点击区域 */ border: 1px solid...: #218838; /* 鼠标悬停时更改按钮颜色 */ } 样式解释 全局样式:​​body​​ 设置了全局字体和页面的边距,使内容不会紧贴浏览器边缘。...标题:​​h1​​ 的颜色被设置为深灰色,以提高可读性。 表单样式:​​form​​ 的最大宽度限制在 400 像素,并居中显示。它有一定的内边距和圆角边框,增加了视觉效果。

    19010

    Java-GUI编程之Swing组件

    为组件设置边框 很多情况下,我们常常喜欢给不同的组件设置边框,从而让界面的层次感更明显,swing中提供了Border对象来代表一个边框,下图是Border的继承体系图: ​ 特殊的Border:...,需要传入其他两个Border对象,一个作为内边框,一个座位外边框 给组件设置边框步骤: 使用BorderFactory或者XxxBorder创建Border的实例对象; 调用Swing组件的setBorder...(Border b)方法为组件设置边框; 案例: ​ 请使用Border实现下图效果: ​ 演示代码: import javax.swing.*; import javax.swing.border...addSeparator( Dimension size ) 向工具条中添加指定大小的分隔符 setFloatable( boolean b ) 设定工具条是否可以被拖动 setMargin(Insets m) 设置工具条与工具按钮的边距...); 从 Action 对象中获得对应的属性来设置该组件(例如,通过 name 来设置文本,通过 lcon 来设置图标) ; 把Action监听器注册到刚才创建的组件上; 案例: ​ 使用JToolBar

    2.3K20

    『知识巩固#1』Html、Css基础整理

    label标签 实现点击固定区域便可选中单选框、多选框 使用方法① 用label标签把内容包裹起来 在表单标签上添加 id 属性 在 label 标签的for属性中设置对应的id值 使用方法②...-、…… 内边距 上右下左旋转设置padding的值 注意: ① 设置width和height是内容的宽高!...② 设置border会撑大盒子 ③ 设置padding会撑大盒子 优化计算公式 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框 盒子高度 = 上边框 + 上...padding + 内容宽度 + 下padding + 下边框 css3模型自动内减 加上box-sizing: border-box 浏览器会自动计算多余大小,自动在内容中减去 外边距 与内边距设置写法一样...,只是不计入盒子的大小中 清除默认边距 浏览器会默认给部分标签设置默认的margin和padding,但一般在项目开始前需要先清除这些标签默认的margin和padding,后续自己设置 常用 * {

    4K20

    20个 CSS 快速提升技巧

    :not() 解决lists边框的问题 在web设计中,我们通常使用:last-child nth-child 选择器来覆盖原先声明应在父选择器上的样式。...然而,最重要的是,我们可以通过使用:not伪类(pseudo-class) 在你想声明的元素上仅仅只使用一种样式: .nav li:not(:last-child) { border-right...box-decoration-break 假设您希望对换行到多行的长文本行应用统一的间距、边距、突出显示或背景色,但不希望整个段落或标题看起来像一个大块。...Box Decoration Break属性允许您仅对文本应用样式,同时保持填充和页边距的完整性。...19、在表单元素上设置字体大小,以获得更好的移动体验 为了避免移动浏览器(iOS Safari等)在点击下拉列表时放大HTML表单元素,请在添加font-size样式: input[type

    3.3K20

    CSS基础——css 属性

    border 设置元素四周的边框,如:border:1px solid black; 设置元素四周边框是1像素宽的黑色实线以上也可以拆分成四个边的写法,分别设置四个边的:border-top 设置顶边边框...margin 设置元素和外界的距离,也叫外边距,如margin:20px;margin是同时设置4个边的,也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right...,如果设置四边是上右下左 */ /* padding: 10px; */ padding-left: 10px; padding-top: 10px;...margin 设置元素和外界的距离,也叫外边距,如margin:20px;margin是同时设置4个边的,也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right...,如果设置四边是上右下左 */ /* padding: 10px; */ padding-left: 10px; padding-top: 10px;

    1.5K21

    全栈之前端 | 10.CSS3基础知识之表单表格学习

    0x01 表单相关属性介绍 描述: 在HTML中我们常常会输入一些数据传递到后端,所以会使用到 form 元素 或者 input 元素、textarea 元素 以及那些用来包含和标记表单特定部分的 <...*/ border-width: 2px 1.5em; /* 当给定三个宽度时,该宽度分别依次作用于选定元素的上横边、纵边、下横边 */ border-width: 1px 2em 1.5cm; /*...当给定四个宽度时,该宽度分别依次作用于选定元素的上横边、右纵边、下横边、左纵边(即按顺时针依次作用) */ border-width: 1px 2em 0 4rem; /* 用法二:使用全局关键字...*/ 示例演示: /* 示例1.顶部 纵边 下横边 */ border-width: 2ex 1.25ex 0.5ex; /* 示例2.上横边、右纵边、下横边、左纵边 */ border-width.../eg_cute.gif" />使用 "line-height" 属性的百分比值来排列此元素,允许使用负值。 这是一幅border="0" src=".

    22610
    领券