《css秘籍》-第七章-上（margin、padding）_html/css

用margin和padding控制空间

margin可以用百分比进行布置，例如

margin和padding可以使用快捷属性：

快捷方式很方便设置4个方向的值。

边距冲突

margin负值

首頁

web前端

html教學

《css秘籍》-第七章-上（margin、padding）_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:00 AM

padding是指与其边框线之间的空间
border是指盒子周边的直线
background-color是用来填充边框内部空间的
margin是指一个标签和另外一个标签之间的间隔。

默认是这样的，但是由于不同的浏览器会给相同的标签提供不同的padding和margin，因此最好将所有标签的padding和margin都置零

用margin和padding控制空间

padding是在内容和边框之间增加空间，padding占用的空间也可以为空白内容，但他仍然会填满背景色或者图片，margin则是在元素之间增加空白，所有有时候看到增加margin之后，会多了空白的沟槽。

margin可以用百分比进行布置，例如

< !DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8"/>    <title></title>    <style>        .test1{            margin-left: 20%;            margin-right: 20%;            width: 500px;            height: 500px;            border: solid;        }    </style></head><body><div class="test1"></div></body></html>

登入後複製

假设这个div就是在html的body的一个div，这样的话这个div会始终保持增加距离浏览器左边%20的间距和距离浏览器右边%20的间距。这种做法很适合在做一些适配浏览器尺寸的操作。

margin和padding可以使用快捷属性：

例如

margin: 0 10px 20px 30px;

登入後複製

这个配置的参数从左到右是，上边，右边，下边，左边的margin。

快捷方式很方便设置4个方向的值。

边距冲突

当元素的margin-bottom碰到另外一个元素的margin-top的时候，浏览器并不是将他们相加，而是应用他们中较大的一个。这时候就会很奇怪，所以应该使用padding-top或者padding-bottom。

margin负值

margin的正值是增加元素之间的空间，而负值是移除他们之间的空间。所以通过设置margin的负值可以很简单的将元素移动到想要的位置。

未经允许不得转载：神一样的少年 » 《css秘籍》-第七章-上（margin、padding）

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1677

CakePHP 教程

1431

Laravel 教程

1334

PHP教程

1280

C# 教程

1257

Related knowledge

HTML：結構，CSS：樣式，JavaScript：行為 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML，CSS和JavaScript的未來：網絡開發趨勢 Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。

HTML的未來：網絡設計的發展和趨勢 Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述 Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。