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

不在同一元素上使用宽度和填充/边距?

在一个网页布局中,如果不在同一元素上使用宽度和填充/边距,可能会导致布局错乱或者不美观。宽度和填充/边距都是用来控制元素在网页上的显示效果的,它们的作用和区别如下:

  1. 宽度:宽度是指元素在网页上的水平尺寸,即元素的宽度。宽度可以使用像素、百分比等单位来表示。
  2. 填充/边距:填充和边距都是用来控制元素与其他元素之间的间距。填充是指元素内部的间距,即元素内部的内容与元素边界之间的距离;边距是指元素外部的间距,即元素与其他元素之间的距离。

因此,在同一元素上使用宽度和填充/边距可以更好地控制元素在网页上的显示效果,避免布局错乱或者不美观。例如,可以使用宽度来控制元素的尺寸,使用填充/边距来控制元素与其他元素之间的间距。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CSS(三)

Block 元素 Inline 元素 屏幕呈现的每个 HTML 元素都是一个框,它们有两种形式: Block boxes Inline boxes。...填充总是如此,因为它在边框内部,边框内的所有内容都有背景。 速记格式 两值速记 四值速记 注意: 是否想要使用速记表格主要取决于个人偏好团队惯例。...您选择其中一个的最常见原因是: 填充具有背景,而始终是透明的 填充包含在元素的单击区域中,而则不包括在内 会发生垂直折叠,而填充则不会 块级元素内联元素之间最明显的对比之一是它们对边的处理...Inline box 完全忽略元素的顶部底部。 水平显示会像我们期望的那样,而元素周围的垂直空间没有变化。...垂直外边折叠最可能发生的两种简单情况: 两个紧邻的兄弟元素的外边发生折叠 父子元素的外边发生折叠 首子元素与父元素外边发生折叠 尾子元素与父元素的下外边发生折叠 预防折叠 有时我们确实希望防止折叠

1.9K20

深入学习下 CSS 间距相关的知识

由于可以在四个不同的方向(、右、下、左)添加,因此在深入示例用例之前阐明一些基本概念非常重要。...折叠 简而言之,当两个垂直元素有一个,并且其中一个的大于另一个时,就会发生折叠。 在这种情况下,将使用较大的,而忽略另一个。...负 它可以与四个方向的一起使用,在某些用例中非常有用。 让我们假设以下内容: 父级有 padding: 1rem,这导致子级从顶部、左侧右侧偏移。 但是,子元素应该紧贴其父元素的边缘。...因此,导航项的宽度取决于它们的内容。 以下是解决方案: 设置导航项的最小宽度 增加水平填充 在分隔符的左侧添加额外的 最简单更好的解决方案是第三种,即添加一个margin-left。...由于应用于父元素 .card__content 的填充,边框不会粘在边缘。 是的,你猜对了! 负是解决办法。

13.4K40
  • 盒子模型超详解——大佬不用看,新手看过来

    所有的HTML元素可以看做盒子,它包括:外边、边框、内填充实际内容。 但是这样说实在是太官方了,对新手很不友好,我个人也不喜欢这样描述。...那此时盒子的实际宽度又是多少呢? 盒子的实际宽度=盒子左右两边边框的宽度(3px*2)+左右两的内边(50px*2)+盒子内容的宽度(200px)=306px。...最终元素的总宽度计算公式是这样的: 总元素宽度=宽度+左填充+右填充+左边框+右边框+左边+右边 元素的总高度最终计算公式是这样的: 总元素的高度=高度+顶部填充+底部填充+上边框+下边框...margin-top:设置元素外边。 margin-bottom:设置元素的下外边。 margin-left:设置元素的左外边 margin-right:设置元素的右外边。...然而,它也可以border-width 、 border-color一起使用

    1.6K31

    前端入门学习--CSS

    CSS盒模型本质是一个盒子,封装周围的HTML元素,它包括:,边框,填充实际内容。 盒模型允许我们在其它元素周围元素边框之间的空间放置元素。...: 0; } 最终元素的总宽度计算公式是这样的: 总元素宽度=宽度+左填充+右填充+左边框+右边框+左边+右边 元素的总高度最终计算公式是这样的: 总元素的高度=高度+顶部填充+底部填充+上边框...也就是,不要给元素添加具有指定宽度的内边,而是尝试将内边或外边添加到元素的父元素元素。 IE8 及更早IE版本不支持设置填充宽度边框的宽度属性。... 这是一个指定填充的段落。...使用CSS来添加背景、格式化文本、以及格式化边框,并定义元素填充

    27.7K20

    CSS盒子模型

    左右边简写 */ margin: 10px 10px; /* 右下左四个 */ margin: 10px 10px 10px 10px; /* 右下左分别单独配置...在宽度高度之外绘制元素的内边、边框、外边,称为标准盒子模型。 border-box:为元素设定的widthheight属性决定了元素的边框盒。...就是说,为元素指定的任何内边边框都将在已设定的宽度高度内进行绘制。通过从已设定的宽度高度分别减去 边框 内边 才能得到内容的宽度高度,称为IE盒子模型。...根据W3C的规范,元素内容占据的空间是由width属性设置的,而内容周围的paddingborder值是另外计算的。不幸的是,IE5.XIE6在怪异模式中使用自己的非标准模型。...也就是,不要给元素添加具有指定宽度的内边,而是尝试将内边或外边添加到元素的父元素元素。 IE8及更早IE版本不支持设置填充宽度边框的宽度属性。

    76730

    揭示不为人知的CSS

    每个盒子都有4个区域,用于定义元素(margin)、边框(border)、填充(padding)内容区域。 默认情况下,你给一个元素设置的宽度,只是设置了内容区域的宽度。...在这种情况下,它似乎可以感觉到在内容田间的填充,但实际,是重新计算宽度以确保一切都适合。 通过比较,设置宽度为“100%”时,不管填充边框的大小是多少,内容区域都将填充可用空间。...重叠 当意外重叠当时候,真的令人很困惑,因为你不知道发生了什么。当两个或多个相邻的垂直接触时,有时会发生重叠,并且不会用填充或边框分隔。...如果子元素的边缘扩展到父元素的边缘,并且不会被填充分隔开,那么就会出现重叠的现象。...您需要知道的主要事情是当元素没有填充或边框时,垂直可能会重叠。 如果你想了解的更详细, CSS Tricks 有一篇很好的 重叠释义的文章推荐你看一下。

    1.6K30

    译|CSS中的间距,前端开发中各种设置间距的优点缺点及实例

    在上面的模型中,一个元素有 margin-bottom,另一个元素有 margin-top,较大的元素获胜。 为避免此类问题,建议按照本文使用单向。...由于对父元素 .card__content 进行了填充,因此边框没有粘在边缘。 ? 是的,你猜对了!负是解决办法。...使用抽象组件 解决上述问题的一种方法是使用抽象的组件,其目标是托管其他组件,就像Max Stoiber所说的那样,这是将管理的责任移到了父元素,让我们以这种思维方式重新思考以前的用例。 ?...间距可能在X页,但不在Y页。 我在检查Facebook的新设计CSS时首先注意到了这一点。 ? 那是一个 ,内联样式宽度:16px,它唯一的作用是在左边缘包装器之间增加一个空白空间。...CSS数学函数:Min(),Max(),Clamp() 有可能有动态的吗?例如,根据视口宽度设置具有最小值最大值的空白。答案是肯定的!我们可以。

    12K10

    网页布局基础

    由块级元素(块级元素特点:从左到右撑满页面,独占一行,触碰到页面边缘时,会自动换行)行级元素(块级元素特点: 在同一行内显示,不会改变HTML文档结构 )组成。...CSS盒模型本质是一个盒子,封装周围的HTML元素,它包括:外边(margin)、边框(border)、内边(padding)、盒子中的内容(content)....要知道,完全大小的元素,你还必须添加填充(padding),边框(border)。....aotu 会根据浏览器的宽度自动的设置两的外边。...可以使用水平内边、边框外边调整它们的间距。但是,垂直内边、边框外边不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。

    1.8K20

    分享 10 个 常用且必须要掌握的 CSS 知识点

    元素的总高度元素宽度计算如下: 总高度:高度 + 上下内边 + 上下边框 + 上下边。 总宽度宽度+左右内边+左右边框+左右外边。...简单来说,这意味着边、边框填充将添加到使用 width height 属性指定的总高度宽度中。 此外,添加、内边边框不会减小内容区域的总大小。...或者换句话说,当向元素添加、内边边框时,元素的总高度宽度不会增加。 CSS盒子模型的组成部分: 1、内容: 这是 CSS 盒子模型的主要元素。...使用属性在 HTML 元素设置填充。...4、元素边界之外的空间。它在相邻元素之间创建了一个空间。

    6.9K10

    CSS盒子模型-概述

    image.png 最终元素的总宽度计算公式是这样的: 总元素宽度=宽度+左填充+右填充+左边框+右边框+左边+右边 元素的总高度最终计算公式是这样的: 总元素的高度=高度+顶部填充+底部填充+上边框...+下边框+上边+下边 2、浏览器兼容性   W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding border 值是另外计算的。...不幸的是,IE5.X 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边边框的宽度的总和。   ...IE8 及更早IE版本不支持 填充宽度边框的宽度属性设。 解决IE8及更早版本不兼容问题可以在HTML页面声明 即可。 3、内联元素与块元素   div、h1 或 p 元素常常被称为块级元素。...如果让行内元素变成块元素,通过将 display 属性设置为 block。还可以通过把 display 设置为 none,隐藏元素不在文档流中占据空间。

    75310

    css学习--css基础

    a{ display:block; } 块级元素特点: 每个块级元素都从新的一行开始,并且其后的元素也另起一行(真霸道,一个块级元素独占一行) 元素的高度、宽度、行高以及顶底边都可以设置 元素宽度在不设置的情况下...div{ display:inline; } 内联元素特点: 其他元素都在一行元素的高度、宽度及顶部底部不可设置; 元素宽度就是它包含的文字或图片的宽度,不可改变 解决行内元素间隙bug...inline-block元素特点: 其他元素都在一行元素的高度、宽度、行高以及顶底边都可以设置; 3.盒子模型 3.1什么是盒子模型 css中,盒子模型是关于元素的宽高的。如下图: ?...因此一个元素实际宽度为: 盒子的宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。 ?...: div{padding:10px;} 如果上下填充为10px,左右填充为20px: div{padding:10px 20px;} 3.5盒模型边界 元素与其他元素之间的距离可以使用边界margin

    2.3K101

    你不知道的 CSS

    【负】?负的效果。注意左右负表现并不一致。左为负时,是左移,右为负时,是左拉。上下与左右类似 ? 02.【shape-outside】❤不要自以为是了。...【input的宽度】?并不是给元素设置display:block就会自动填充元素宽度。input 就是个例外,其默认宽度取决于size特性的值 ? 08.【定位特性】?...background-attachment指定背景如何附着在容器,注意其属性值localfixed的使用 ? 25.【动画延时】?动画添加延迟时间可以使步调不一致 ? 26....【outline使用】?可以使用outline来描,不占地方,它甚至可以在里面 ? 27【背景定位】?当固定背景不随元素滚动时,背景定位是相对于视口的 ? 28【tab-size】?...使用CSS滤镜实现背景虚化 ? 33【fill-available】?设置宽度为fill-available,可以使inline-block像block那样填充整个空间 ?

    1.3K30

    你未必知道的49个CSS知识点

    【负】?负的效果。注意左右负表现并不一致。左为负时,是左移,右为负时,是左拉。上下与左右类似 ? 02.【shape-outside】❤不要自以为是了。...【input的宽度】?并不是给元素设置display:block就会自动填充元素宽度。input 就是个例外,其默认宽度取决于size特性的值 ? 08.【定位特性】?...background-attachment指定背景如何附着在容器,注意其属性值localfixed的使用 ? 25.【动画延时】?动画添加延迟时间可以使步调不一致 ? 26....【outline使用】?可以使用outline来描,不占地方,它甚至可以在里面 ? 27【背景定位】?当固定背景不随元素滚动时,背景定位是相对于视口的 ? 28【tab-size】?...使用CSS滤镜实现背景虚化 ? 33【fill-available】?设置宽度为fill-available,可以使inline-block像block那样填充整个空间 ?

    1.3K20

    你未必知道的49个CSS知识点

    【负】?负的效果。注意左右负表现并不一致。左为负时,是左移,右为负时,是左拉。上下与左右类似 ? 02.【shape-outside】❤不要自以为是了。...【input的宽度】?并不是给元素设置display:block就会自动填充元素宽度。input 就是个例外,其默认宽度取决于size特性的值 ? 08.【定位特性】?...background-attachment指定背景如何附着在容器,注意其属性值localfixed的使用 ? 25.【动画延时】?动画添加延迟时间可以使步调不一致 ? 26....【outline使用】?可以使用outline来描,不占地方,它甚至可以在里面 ? 27【背景定位】?当固定背景不随元素滚动时,背景定位是相对于视口的 ? 28【tab-size】?...使用CSS滤镜实现背景虚化 ? 33【fill-available】?设置宽度为fill-available,可以使inline-block像block那样填充整个空间 ?

    1.5K20

    【前端芝士树】详解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth

    基本概念:标准模式怪异模式,标准模型IE模型 CSS如何设置这两种模型 JS如何设置获取盒模型对应的宽和高 实例题(根据盒模型解释重叠) BFC(重叠解决方案) 1.盒模型是什么 2018搜狐前端笔试题...盒模型本质是用以封装HTML元素的概念盒子,它包含了,边框,填充以及实际内容。...Windows平台的IE5Netscape4则只提供了怪异模式。 选择使用哪种模式需要一个触发器,而 “DOCTYP切换” 则用于此目的。.../ ClientWidth / ScrollWidth 6.重叠 什么是重叠 如下图,父元素没有设置margin-top,而子元素设置了margin-top:20px;可以看出,父元素也一起有了...决定,属于同一个bfc的两个相邻box的margin会发生重叠 bfc的区域不会与浮动区域的box重叠 bfc是一个页面上的独立的容器,外面的元素不会影响bfc里的元素,反过来,里面的也不会影响外面的

    1K60

    你未必知道的49个CSS知识点

    【负】?负的效果。注意左右负表现并不一致。左为负时,是左移,右为负时,是左拉。上下与左右类似 ? 02.【shape-outside】❤不要自以为是了。...【input的宽度】?并不是给元素设置display:block就会自动填充元素宽度。input 就是个例外,其默认宽度取决于size特性的值 ? 08.【定位特性】?...background-attachment指定背景如何附着在容器,注意其属性值localfixed的使用 ? 25.【动画延时】?动画添加延迟时间可以使步调不一致 ? 26....【outline使用】?可以使用outline来描,不占地方,它甚至可以在里面 ? 27【背景定位】?当固定背景不随元素滚动时,背景定位是相对于视口的 ? 28【tab-size】?...使用CSS滤镜实现背景虚化 ? 33【fill-available】?设置宽度为fill-available,可以使inline-block像block那样填充整个空间 ?

    1.2K10

    CSS基本知识(慕课网)

    (真霸道,一个块级元素独占一行)           ②、元素的高度、宽度、行高以及顶底边都可设置。           ...;           ②、元素的高度、宽度及顶部底部不可设置;           ③、元素宽度就是它包含的文字或图片的宽度,不可改变。...就是同时具备内联元素、块状元素的特点          特点: ①、其他元素都在一行;           ②、元素的高度、宽度、行高以及顶底边都可设置。           ...当border:的时候是给边框四条线都设置样式       如果给规定的一的边框设置: div{border-bottom:1px solid red;} 同样可以使用下面代码实现其它三(、右、左...11、盒模型代码缩写 盒模型外边(margin)、内边(padding)边框(border)设置上下左右四个方向的是按照顺时针方向设置的:右下左。

    2.2K60

    细细品读!深入浅出,官方文档看ConstraintLayout

    前两种方式其他布局的用法相同,最后一种是通过填充约束来重新设置控件的尺寸(如图 7,(a)是wrap_content,(b)是0dp)。代码案例如下: ?...上述代码对宽度高度都进行了约束,通过H,指定高度受约束,所以高度的尺寸会根据宽度大小按照比例得到,其效果如图所示: ?...至于为何高度填充屏幕而宽度填充,其玄机在于下面这句话,能理解它,就理解了比例使用的精髓: ?...属性layout_constraintHorizontal_heightlayout_constraintVertical_weight控制使用MATCH_CONSTRAINT的元素如何均分空间。...例如,一个Chain中包含两个使用MATCH_CONSTRAINT的元素,第一个元素使用的权重为2,第二个元素使用的权重为1,那么被第一个元素占用的空间是第二个元素的2倍。

    97840

    盒模型box-sizing

    标准盒模型(w3c标准) 所有HTML元素可以看作盒子,在CSS中,”box model”这一术语是用来设计布局时使用。...CSS盒模型本质是一个盒子,封装周围的HTML元素,它包括:,边框,填充实际内容。 在标准盒模型中,width height 指的是内容区域的宽度高度。...增加内边、边框外边不会影响内容区域的尺寸,但是会增加元素框的总尺寸。...不幸的是,IE5.X 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边边框的宽度的总和。...这可令浏览器呈现出带有指定宽度高度的框,并把边框内边放入框中。 box-sizing类似于ie盒模型,它会把内边边框包含在width内。

    78020
    领券