css实战——清除列表中最后一个元素的下边距

需求描述

常见于列表的排版,如文章列表、用户列表、商品列表等。
在这里插入图片描述

代码实现

    <div class="listBox"><div class="itemBox">文章1</div><div class="itemBox">文章2</div><div class="itemBox">文章3</div></div>
.listBox {margin: 20px;padding: 10px;border: 1px solid black;width: 300px;
}
.itemBox {padding: 0px 10px;line-height: 2;background: gainsboro;margin-bottom: 10px;
}

此时效果如下
在这里插入图片描述
最后一个元素的下边距导致列表与页面的下边距过大!

怎样清除列表中最后一个元素的下边距呢?

再加上下方样式即可 !

.itemBox:last-child {margin-bottom: 0px;
}
  • :last-child 匹配同辈元素中的最后一个该元素

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/140938.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SSM框架Demo: 简朴博客系统

文章目录 1. 前端页面效果2. 项目创建3. 前期配置3.1. 创建数据库数据表3.2. 配置文件 4. 创建实体类5. 统一处理5.1. 统一返回格式处理5.2. 统一异常处理 6. 全局变量7. Session工具类8. 登录拦截器9. 密码加盐加密10. 线程池组件11. dao层11.1. UserMapper11.2. ArticleMappe…

聊聊本地缓存神器:Caffeine

目录 Caffeine基本介绍 简单使用 清除策略 GuavaCache和Caffeine差异 Caffeine基本介绍 Caffeine 是基于 JAVA 8 的高性能本地缓存库。并且在 spring5 (springboot 2.x) 后&#xff0c;spring 官方放弃了 Guava&#xff0c;而使用了性能更优秀的 Caffeine 作为默认缓存组…

nodejs express vue uniapp电影购票系统源码

开发技术&#xff1a; node.js&#xff0c;vscode&#xff0c;HBuilder X express vue elementui uniapp 功能介绍&#xff1a; 用户端&#xff1a; 登录注册 首页显示搜索电影&#xff0c;轮播图&#xff0c;电影分类&#xff0c;最近上架电影 点击电影进入电影详情&am…

数据结构线性表——栈

前言&#xff1a;哈喽小伙伴们&#xff0c;今天我们将一起进入数据结构线性表的第四篇章——栈的讲解&#xff0c;栈还是比较简单的哦&#xff0c;跟紧博主的思路&#xff0c;不要掉队哦。 目录 一.什么是栈 二.如何实现栈 三.栈的实现 栈的初始化 四.栈的操作 1.数据入栈…

Apache Druid连接回收引发的血案

问题 线上执行大批量定时任务&#xff0c;发现SQL执行失败的报错&#xff1a; CommunicationsException, druid version 1.1.10, jdbcUrl : jdbc:mysql://xxx?useUnicodetrue&characterEncodingUTF-8&zeroDateTimeBehaviorconvertToNull,testWhileIdle true, idle …

Zigbee智能家居方案设计

背景 目前智能家居物联网中最流行的三种通信协议&#xff0c;Zigbee、WiFi以及BLE&#xff08;蓝牙&#xff09;。这三种协议各有各的优势和劣势。本方案基于CC2530芯片来设计&#xff0c;CC2530是TI的Zigbee芯片。 网关使用了ESP8266CC2530。 硬件实物 节点板子上带有继电器…

flink对状态ttl进行单元测试

背景 在处理键值分区状态时&#xff0c;使用ttl设置过期时间是我们经常使用的&#xff0c;但是任何代码的修改都需要首先进行单元测试&#xff0c;本文就使用单元测试来验证一下状态ttl的设置是否正确 测试状态ttl超时的单元测试 首先看一下处理函数&#xff1a; // 处理函…

Hosts File Editor 实用工具

我一般手工编辑hosts文件&#xff0c;我想给hosts文件加一个开关&#xff0c;本想自己实现&#xff0c;但是忽然发现微软已经提供了官方的解决方案&#xff0c;感觉有能人。 对文件的行的修改被抽象成了一个开关。腻害&#xff01;&#xff01;&#xff01;

SpringBoot3-快速入门

1.前置知识 Java17Spring、SpringMVC、MyBatisMaven、IDEA\ 2. 环境要求 环境&工具 版本&#xff08;or later&#xff09; SpringBoot 3.0.5 IDEA 2021.2.1 Java 17 Maven 3.5 Tomcat 10.0 Servlet 5.0 GraalVM Community 22.3 Native Build Tools 0.9…

◢Django 自写分页与使用

目录 1、设置分页样式,并展示到浏览器 2、模拟页码 3、生成分页 4、数据显示 5、上一页下一页 6、数据库的数据分页 7、封装分页 8、使用封装好的分页 建立好app后&#xff0c;设置路径path(in2/,views.in2)&#xff0c;视图def in2(request): &#xff0c;HTML: in2.html…

RK3568笔记五:基于Yolov5的训练及部署

若该文为原创文章&#xff0c;转载请注明原文出处。 一. 部署概述 环境&#xff1a;Ubuntu20.04、python3.8 芯片&#xff1a;RK3568 芯片系统&#xff1a;buildroot 开发板&#xff1a;ATK-DLRK3568 开发主要参考文档&#xff1a;《Rockchip_Quick_Start_RKNN_Toolkit2_C…

开源知识库软件xwiki在Windows下的安装

文章目录 开源知识库软件-xwiki在windows上的部署0、参考文档1、前置环境准备1.1、Windows版本及系统配置1.2、JDK11安装1.3、Tomcat9安装1.4、MySQL5.7数据库的安装 2、xwiki安装3、配置3.1、修改配置支持对文档内容进行搜索 4、问题解决4.1、附件无法上传问题4.1、附件无法下…

FreeRTOS知识梳理

一、RTOS:Real time operating system,中文意思为 实时操作系统&#xff0c;它是一类操作系统&#xff0c;比如uc/OS、FreeRTOS、RTX、RT-Thread 这些都是实时操作系统。 二、移植FreeRTOS到STM32F103C8T6上 interface选择CMSIS_V1,RCC选择Crystal Ceramic Resonator 。 …

5. 深度学习——正则化

机器学习面试题汇总与解析——正则化 本章讲解知识点 什么是正则化为什么要使用正则化?详细讲解正则化本专栏适合于Python已经入门的学生或人士,有一定的编程基础。本专栏适合于算法工程师、机器学习、图像处理求职的学生或人士。本专栏针对面试题答案进行了优化,尽量做到好…

C#中匿名类的声明及使用

C#中声明方法或类时&#xff0c;可以不指定的类或方法的名字&#xff0c;也就是匿名类和匿名的方法。以下主要介绍C#中匿名类的声明及使用。 1、匿名类的使用 匿名类是C# 3.0/.NET 3.x中新增特性&#xff0c;在匿名类的语法中并没有为其命名&#xff0c;而是直接使用new { }方…

无感刷新token

无感刷新 无感刷新Token技术是一种用于实现持久登录体验的关键技术&#xff0c;它通过在用户登录后自动刷新Token&#xff0c;以延长用户的登录状态&#xff0c;避免频繁要求用户重新登录。 实现 使用access_token&#xff08;短效token&#xff09;和refresh_token&#xf…

CSS精灵图:提高网站性能的秘密武器

在网站开发中&#xff0c;页面加载速度是一个非常重要的指标。而CSS精灵图正是一种可以帮助提高网站性能的技术。它可以将多个小图标合并成一个大图&#xff0c;从而减少HTTP请求次数&#xff0c;提高页面加载速度。本篇博文将为你详细介绍CSS精灵图的概念、优势以及实现方式。…

海康威视(iVMS)综合安防系统任意文件上传漏洞复现 [附POC]

文章目录 海康威视&#xff08;iVMS&#xff09;综合安防系统任意文件上传漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 0x06 修复建议 海康威视&#xff08;iVMS&#xff09;综合安防系统任意文件上传漏洞复…

[PyTorch][chapter 62][强化学习-基本概念]

前言&#xff1a; 目录&#xff1a; 强化学习概念 马尔科夫决策 Bellman 方程 格子世界例子 一 强化学习 强化学习 必须在尝试之后&#xff0c;才能发现哪些行为会导致奖励的最大化。 当前的行为可能不仅仅会影响即时奖赏&#xff0c;还有影响下一步奖赏和所有奖赏 强…

使用Inis搭配内网穿透实现Ubuntu上快速搭建博客网站远程访问

文章目录 前言1. Inis博客网站搭建1.1. Inis博客网站下载和安装1.2 Inis博客网站测试1.3 cpolar的安装和注册 2. 本地网页发布2.1 Cpolar临时数据隧道2.2 Cpolar稳定隧道&#xff08;云端设置&#xff09;2.3.Cpolar稳定隧道&#xff08;本地设置&#xff09; 3. 公网访问测试总…