html 边框变粗 margin -1px

最近刚开始学习web前端,html和css,对于遇到的边框变粗的问题,用margin为负值解决问题发表一些自己的理解

首先我们来看看下面一张图片

list-style: none;                 border:1px solid black;                 width: 200px;                 line-height: 2em;                 text-align: center;

你会发现中间的线条特别的粗,这个问题该如何解决呢?

这里就可以用margin -1px(取决你边框的宽度)来解决。加入这行代码的样式,如下图

 下面我们就来分析这就话,对于边框的top,和left向上和向左移动一个而对于right和bottom它们会把紧跟其后的元素拉过来。

其实每个li都向上和向左在原来的基础上移动了1px,对于bottom边框把下方紧随其后的top边框拉过来之后,top边框也要向上移动1px,刚好重合。 还有其他的解决方法,就是重合的边框你可以设置:border-top(bottom或left或right):none;这样的话也可以取消边框。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏CDA数据分析师

想知道被谁删了微信好友?可以用 Python!

本文根据 gaosen 的开源项目 wechat-deleted-friends 整理而成。 还在苦恼不知道被谁删了微信好友么?这里有个 gaosen 编写的工...

1926
来自专栏Nian糕的私人厨房

WeChat 文章列表页面(一)

本次的系列博文的知识点讲解和代码,主要是来自于 七月老师 的书籍《微信小程序开发:入门与实践》,由个人总结并编写,关于更多微信小程序开发中的各项技能,以及常见问...

884
来自专栏技术沉淀

命令行工具:csvkit命令行操作csv

1976
来自专栏Python中文社区

用Python玩转微信的正确姿势!

0. itchat 最近研究了一些微信的玩法,我们可以通过网页版的微信微信网页版,扫码登录后去抓包爬取信息,还可以post去发送信息。 然后发现了itchat这...

4418
来自专栏Deep learning进阶路

给python安装numpy+scipy+sklearn

Windows下安装scikit-learn 准备工作 ·        Python (>= 2.6 or >=3.3), ·        Numpy (>...

2480
来自专栏Python、Flask、Django

python内容识别

1185
来自专栏何俊林

今日力推: Android 单词助手客户端 / Android 炫酷视频播放器

一、 单词助手 Dictionary 单词助手,可提供单词中英文的翻译,以及长句子的翻译,金山词霸提供的API Retrofit 网络请求 RxJava+Rx...

2007
来自专栏前端说吧

css布局 - 垂直居中布局的一百种实现方式(更新中...)

1. line-height行高简单粗暴实现法:line-height:Npx(N = 与元素高度相同的值)

1441
来自专栏python3

html初识

浏览器是网页运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、猎豹浏览器、Safari和Opera等

923
来自专栏小樱的经验随笔

CTF---隐写术入门第三题 打不开的文件

打不开的文件分值:10 来源: 实验吧 难度:中 参与人数:2718人 Get Flag:1222人 答题人数:1276人 解题通过率:96% 咦!这个文件怎么...

45512

扫码关注云+社区