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

在同一行中对齐4个div,页边距为10px

,可以使用CSS的flexbox布局来实现。

首先,在HTML中创建一个包含4个div的容器,例如:

代码语言:html
复制
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

然后,在CSS中定义容器的样式,并使用flexbox布局来对齐div:

代码语言:css
复制
.container {
  display: flex;
  justify-content: space-between;
  margin: 10px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

以上代码中,.container类设置为display: flex;,这样容器内的元素会按照一行排列。justify-content: space-between;属性会使得div在容器内均匀分布,并且两侧与容器的边距为10px。.box类定义了每个div的样式,包括宽度、高度和背景颜色。

这样,就可以实现在同一行中对齐4个div,并且设置了10px的页边距。

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

相关·内容

WordPress 主题教程 #11:宽度和布局

之后增加: 之前增加: style.css 文件输入以下代码: #wrapper{ margin: 0 auto...详细解释: margin: 0 auto 0 auto; 意思是(注意顺序):0上页空白,自动右页面空白,0下空白和自动左页面空白。从现在开始,记得设置左右空白自动将使得居中对齐。...还记得设置左边和右边的空白自动是居中吗?...第8步(额外的步骤):修正 IE 的双倍 bug Internet Explorer 有个双倍的 bug,这样 IE 下,我们的页面就是 20像素,20像素的可能会破坏布局并把侧边栏挤到页面的底部...,因为一个20像素的使得 Container 和 Sidebar 的宽度之和 760px 而不是 750px。

1.2K20

CSS 中最后一中元素如何向左对齐

弹性布局,两对齐,最后一列有2个或是3个时,通过动态计算右边来解决左对齐问题。...子元素宽度不固定 如果每一个子元素宽度不固定,那最后一如何实现左对齐呢,有以下两种方法。 1. 弹性布局,两对齐,最后一个元素的右边设置自动。...弹性布局,两对齐,给外层容器添加一个伪元素,伪元素设置 flex:auto 或 flex:1。...每行列数不固定 如果每一列数不固定,那最后一如何实现左对齐呢,有以下两种方法。 1. 使用足够的空白标签进行填充占位,具体的占位数量是由最多列数的个数决定的,一最多几列,就用几个空白标签。...使用格子布局,有天然的间隙和对齐排布,因此,实现最后一对齐可以认为是天生的效果。

1.9K10

你肯定会用到的CSS多行多列布局

前言:因为项目中使用flex过程,如果采用space-between两端对齐,会遇到最后一难以对齐的问题。本文主要对多行多列这种常见的布局,列出解决方案,方便大家日常开发使用。...方案二:计算剩余空间 如果我们知道最后一剩余空间的话,完全可以控制最后一个元素的或者缩放比例去占满剩下的空间,自然就能左对齐了。...要做到这一点,首先得确定宽度和,宽度通常是已知的,我们只需要把确定下来,就能确认剩余空间。...接上面的的例子,假设一有4个, 每个占比24%,4个就是24% * 4 = 96% , 那么可以确定总是4%,由于一有4个元素,而最后一个的右边是多余的,那么可以确定单个的 4% / 3...方案三,兼容性最差,无法ie中正常使用,但用法最简单,布局甚至比flex还要强大。 综上,实际使用,还是推荐使用方案二。

2.1K20

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

在上面的模型,一个元素有 margin-bottom,另一个元素有 margin-top,较大的元素获胜。 避免此类问题,建议按照本文使用单向。...此外,CSS Tricks还在底部和顶部之间进行了投票。61%的开发者更喜欢 margin-bottom 而不是 margin-top。...网格,可以使用 grid-gap 属性轻松列和之间添加间距。...另一个类似的概念是都添加填充,然后边负。这是Facebook故事的一个示例: ?...结果表明,基于 writing-mode 的工作得非常好。 我认为这些用例就足够了。让我们继续一些有趣的概念! 组件封装 大型设计系统包含许多组件。向其直接添加是否合乎逻辑?

11.9K10

【CSS】课程网站 网格商品展示 模块制作 ① ( 网格商品展示模块盒子模型测量及样式 | 顶部文本标题盒子测量及样式 | 代码示例 )

内容高度 , 这里精确的测量 " 精品推荐 " 文本的高与内容高度 ; 该文本盒子如下图所示 , 文本内容 20 像素 , 文本上面和下面各有 20 像素的空白 ; 高直接设置 60 像素 , 文本内容设置成...*/ button { border: none; } /* 设置总体背景 */ body { background-color: #f3f5f7; } /* 版心宽度 1200 像素 , 浏览器居中对齐...0 像素 , 左右内边 10 像素 */ padding: 0 10px; /* 右外边 20 像素 */ margin-right: 20px; /* 高 = 内容高度 垂直居中 */...padding-left: 20px; /* 设置文本颜色 */ color: #bfbfbf; } /* 搜索框按钮 */ .search button { /* 设置左浮动 使其与表单在同一显示...{ /* 高度 = 高 , 垂直居中 */ height: 45px; line-height: 45px; } /* 测导航栏 列表项 的链接样式 */ .subnav li a {

4.3K40

【CSS】课程网站头部制作 ⑤ ( 用户栏测量 | 用户栏代码编写 | 代码示例 )

Web 所用格式 " , 选择导出 png 格式 , 导出选中的切片 ; 导出的切片如下 : 二、用户栏代码编写 ---- 1、HTML 结构 头像 与 名称 单独放在一个 div 盒子 , 这两个元素都要垂直居中对齐..., 分别需要单独设置 ; 头像垂直居中对齐 , 需要使用 padding 内边的方式设置 ; 文字垂直居中对齐 , 需要使用 内容高度 = 高 的方式设置 ; 核心代码 : <!...放置 ; 然后 , 设置用户栏头像 盒子样式 , 其设置 6 像素 上下内边 , 使得头像图片垂直居中 ; 整体 用户栏盒子 高度 42 像素 ; 头像图片宽高均为 30 像素 ; 头像...*/ button { border: none; } /* 设置总体背景 */ body { background-color: #f3f5f7; } /* 版心宽度 1200 像素 , 浏览器居中对齐...0 像素 , 左右内边 10 像素 */ padding: 0 10px; /* 右外边 20 像素 */ margin-right: 20px; /* 高 = 内容高度 垂直居中 */

2.4K30

【CSS】课程网站 Banner 制作 ③ ( Banner 栏右侧课程盒子测量及样式 | Banner 版心盒子模型右侧课程栏代码示例 )

以达到多行文本居中对齐效果 */ margin-top: 10px; } 列表项的三种文本 , 样式如下 : /* Banner 条右侧 课程表 无序列表 列表项 继续学习 文本样式 */ .course-bd...*/ button { border: none; } /* 设置总体背景 */ body { background-color: #f3f5f7; } /* 版心宽度 1200 像素 , 浏览器居中对齐...0 像素 , 左右内边 10 像素 */ padding: 0 10px; /* 右外边 20 像素 */ margin-right: 20px; /* 高 = 内容高度 垂直居中 */...padding-left: 20px; /* 设置文本颜色 */ color: #bfbfbf; } /* 搜索框按钮 */ .search button { /* 设置左浮动 使其与表单在同一显示...{ /* 高度 = 高 , 垂直居中 */ height: 45px; line-height: 45px; } /* 测导航栏 列表项 的链接样式 */ .subnav li a {

3.5K60

CSS 基础

color:red; } 基本 CSS 属性设置 font 字体 字体的属性一般包括字体大小、字体颜色、字体类型、字体样式,浏览器,其默认的字体大小...html5 html5 是html的第五个演进版本 text 文本 text-align 属性,规定元素的文本的水平对齐方式...,该属性只给块元素设置,元素设置没效果,该属性的值 center / left / right,可以设置块元素里面文本和图片的对齐方式 text-indent 属性,规定文本块首行文本的缩进 p...-- 元素可以通过块元素的嵌套来达到文本的水平对齐方式 --> 富强民主文明和谐,自由平等公证法制,爱国敬业诚信友善; 富强民主文明和谐,自由平等公证法制...+ padding + content 四个部分组成 margin 简写属性一个声明设置所有外边属性 border 简写属性一个声明设置所有的边框属性 padding 简写属性一个声明设置所有外边属性

3.2K40

Web-CSS

作用范围:可以对同一个页面的多个元素产生影响。...外边重叠 块的上外边(margin-top)和下外边(margin-bottom)有时合并(折叠)单个,其大小单个的最大值(或如果它们相等,则仅为其中一个),这种行为称为折叠。...每行第一个元素到首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。 space-evenly:flex项都沿着主轴均匀分布指定的对齐容器。...---- align-items CSS align-items属性将所有直接子节点上的align-self值设置一个组。 align-self属性设置项目在其包含块交叉轴方向上的对齐方式。...取值: flex-start:所有从垂直轴起点开始填充。第一的垂直轴起点和容器的垂直轴起点对齐。接下来的每一紧跟前一。 flex-end:所有从垂直轴末尾开始填充。

8.5K20

【CSS】课程网站横版导航栏 ( 横版导航栏测量及样式 | 代码示例 )

盒子样式如下 : 1、总体盒子测量及样式 该盒子是处于版心位置 , 先为其设置版心的样式 , 版心宽度 1200 像素 , 水平居中 , 先将版心的样式设置给盒子 ; /* 版心宽度 1200 像素 , 浏览器居中对齐..., 可以大盒子设置一个高 , 小盒子自动继承 ; font-xxx , line-xxx , text-xxx , color 等样式可以被子元素继承 ; 该盒子有 2 像素的阴影 ; 最终的盒子样式如下...会自动垂直居中 , 文本大小 16 像素 , 颜色 #050505 ; 最终样式 : /* 设置 竖线和课程名称所在盒子 的文本颜色 这是所有的文本样式 课程链接里面 由 a...*/ button { border: none; } /* 设置总体背景 */ body { background-color: #f3f5f7; } /* 版心宽度 1200 像素 , 浏览器居中对齐...0 像素 , 左右内边 10 像素 */ padding: 0 10px; /* 右外边 20 像素 */ margin-right: 20px; /* 高 = 内容高度 垂直居中 */

5.2K30

【CSS】309- 复习 CSS盒模型

2.4 实例题(根据盒模型解释重叠) 例:父元素里面嵌套了一个子元素,已知子元素的高度是 100px,子元素与父元素的上边10px,计算父元素的实际高度。 ?...父子元素和兄弟元素重叠,重叠原则取最大值。空元素的重叠是取 margin 与 padding 的最大值。...2.5.2 BFC原理(渲染规则|布局规则): (1)内部的 Box 会在垂直方向,从顶部开始一个接着一个地放置; (2)Box 垂直方向的距离由 margin (外边)决定,属于同一个 BFC 的两个相邻...的 BFC 属性,使下面的子 div 都处在父 div同一个 BFC 区域之内) 4、去除重叠现象,分属于不同的 BFC 时,可以阻止 margin 重叠 2.6 IFC 2.6.1 IFC基本概念...:以它们的底部、顶部对齐,或以它们里面的文本的基线(baseline)对齐(默认,文本与图片对其),例:line-heigth 与 vertical-align。

1.5K30

【CSS】课程网站 Banner 制作 ① ( Banner 栏测量 | Banner 盒子模型代码 | 代码示例 )

Banner 上下各拉一条辅助线 , 测量其高度 420 像素 ; Banner 中心位置有一张背景大图 , 居中对齐即可 ; Banner 条的版心尺寸 1200 x 420 像素 , 如下图所示...*/ button { border: none; } /* 设置总体背景 */ body { background-color: #f3f5f7; } /* 版心宽度 1200 像素 , 浏览器居中对齐...0 像素 , 左右内边 10 像素 */ padding: 0 10px; /* 右外边 20 像素 */ margin-right: 20px; /* 高 = 内容高度 垂直居中 */...padding-left: 20px; /* 设置文本颜色 */ color: #bfbfbf; } /* 搜索框按钮 */ .search button { /* 设置左浮动 使其与表单在同一显示.../ color: #666666; } /* 用户栏 头像样式 */ .user .user-img { float: left; /* 用户头像 30 像素 容器高 42 上下各 6 像素

3.9K20

前端之HTML和CSS

除了显示成方块,它们一般分为下面两类: 块元素:布局默认会独占一,块元素后的元素需换行排列。 内联元素:元素之间可以排列,设置宽高无效,它的宽高由内容撑开。...再到里面划分列,也就是表示的标签再嵌套标签来表示列,标签的嵌套产生叠加效果。...四个如果设置一样,可以将四个的设置合并成一句: border:10px solid red; 设置内间距padding   设置盒子四的内间距,可设置如下: padding-top:20px;...*/   padding后面还可以跟3个值,2个值和1个值,它们分别设置的项目如下: padding:20px 40px 50px; /* 设置顶部内边20px,左右内边40px,底部内边50px...*/ padding:20px 40px; /* 设置上下内边20px,左右内边40px*/ padding:20px; /* 设置四内边20px */  设置外间距margin

4.3K30

HTML+CSS练习题【详解】

以上说法都错误 下列选项,说法不正确的是() A. 相对路径开发中使用频率不高 B. 同级目录的写法 ./ C.上一级目录的写法 …/ D....高由文字大小与上边组成 B. 高由文字大小与下边组成 C. 高由文字大小与上下边组成 D. 高由上边与下边组成 针对高的作用,下面哪个选项是正确的() A....高可以控制文字盒子的垂直位置 阅读以下代码片段,哪些选项可以不正确的赋值颜色( ) A. color: red; B. color: rgb(255, 0, 0); C. color:...块级元素可以通过display属性修改成其他显示模式 下面哪个标签默认情况下不能在同一显示( ) A. p B. span C. a D. img 以下选项说法正确的是() A....底线对齐 10.把一个div 变成圆形下列正确的是( ) A. div { width: 200px; height: 200px; border: 10px solid black; border-radius

22810

【CSS】课程网站网页底部开发 ( 网页底部盒子模型测量及样式 | 代码示例 )

*/ background-color: #fff; } 3、版心盒子 版心盒子不需要进行特殊设置 , 只需要将之前定义的版心样式设置给改盒子即可 ; /* 版心宽度 1200 像素 , 浏览器居中对齐...*/ button { border: none; } /* 设置总体背景 */ body { background-color: #f3f5f7; } /* 版心宽度 1200 像素 , 浏览器居中对齐...0 像素 , 左右内边 10 像素 */ padding: 0 10px; /* 右外边 20 像素 */ margin-right: 20px; /* 高 = 内容高度 垂直居中 */...padding-left: 20px; /* 设置文本颜色 */ color: #bfbfbf; } /* 搜索框按钮 */ .search button { /* 设置左浮动 使其与表单在同一显示.../* 网格 ul 列表每个列表项样式 */ .box-bd li { /* 设置左浮动 让列表项从左到右排列 */ float: left; /* 设置尺寸 228 x 270 */

4.2K30

「学习笔记」CSS基础

作用 主要用于设置HTML页面的文本内容(字体、大小、对齐方式等)\图片的外形(宽高、边框样式、等)以及版面的布局和外观显示样式。...line-height: 24px; 高测量 高测量方法: 高测量方法高我们利用最多的一个地方是:可以让单行文本盒子垂直居中对齐。 文字的高等于盒子的高度。...行内块元素的特点 和相邻行内元素(行内块)上,但是之间会有空白风险。一可以显示多个 默认宽度就是它本身内容的宽度。 高度,高,外边以及内边都可以控制。...+ 偏移 CSS ,通过 top、bottom、left 和 right 属性定义元素的「偏移」:(方位名词) 偏移属性 示例 描述 top top: 80px 「顶端」偏移量,定义元素相对于其父元素...通常我们使用于强制一显示内容 white-space:normal ;默认处理方式 white-space:nowrap ; 强制同一内显示所有文本,直到文本结束或者遭遇br标签对象才换行。

3.2K30

前端-CSS-更改标签样式-长宽字体-背景-边框-显示方式-定位-透明度-扩展点-02

目录 控制标签元素样式 长宽属性、字体属性、文本对齐、文本装饰、首缩进 背景属性、边框属性、圆角 display 显示方式 盒子模型 margin、padding... float浮动 overflow...是否无效 长宽属性、字体属性、文本对齐、文本装饰、首缩进 div{ ------------长宽属性-------- 设置长宽只对块级标签有效(没有占满一会自动用margin占位...line-height: 50px; 垂直对齐(这个50是它父标签的高度,父标签垂直对齐) ------------文字装饰(可以改a标签属性)--------...垂直没用,padding用不了auto) margin-top: 10px; 上边10px border: 3px solid red; padding:...10px; 写法和margin差不多,只是作用对象(外边/内边)不一样 } 科普(可以谷歌检查去看该元素的盒模型,然后把不需要的改成0) body自带8px的外边margin p标签默认自带

1.4K20
领券