【代碼筆記】Web-CSS-CSS Margin(外邊距)

mayaohua 發(fā)布于2019-04-23 11:51 / 3015人閱讀

一，效果圖。

二，代碼。

DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS Margintitle>
    <style>
    p{
        background-color: yellow;
    }
    p.margin{
margin: 100px 50px;
    }
    style>
head>

<body>
   <p>This is a paragraph with no specified marginp>
   <p class="margin">this is a paragrapth with specified margins.p>
body>

html>

參考資料：《菜鳥教程》

GPU云服務(wù)器云服務(wù)器外邊距重疊 html外邊距上下 html外邊距顏色 html 邊框外邊距

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1256.html

相關(guān)文章

css 的margin學(xué)習(xí)筆記

摘要：的特性始終是透明的。例如就等于如果只有兩個值，第一個值表示上下值，第二個值為左右的值。垂直外邊距合并問題外邊距合并指的是，當(dāng)兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。 Margin的特性 margin始終是透明的。 margin通過使用單獨的屬性，可以對上、右、下、左的外邊距進(jìn)行設(shè)置。即：margin-top、marg...

leiyi 2019-08-28 18:00 評論0 收藏0
CSS學(xué)習(xí)筆記(六) 元素定位

摘要：方法一為父元素添加方法二同時浮動元素方法三添加非浮動的清除元素定位布局的核心是屬性，對元素盒子應(yīng)用這個屬性，可以相對于它在常規(guī)文檔流中的位置重新定位。絕對定位絕對定位會把元素徹底從文檔流中拿出來，然后相對于其他元素默認(rèn)是定位上下文定位。 1.盒模型盒模型，就是瀏覽器為頁面中的每個 HTML 元素生成的矩形盒子。這些盒子們都要按照可見版式模型（visual formattin...

浠ラ箍 2019-08-28 18:03 評論0 收藏0
HTML、CSS筆記

摘要：相鄰的兄弟元素相鄰的兩個兄弟元素之間的外邊距會塌陷。塊級父元素與其第一個最后一個子元素如果塊級父元素中，上邊框?qū)挾燃吧蟽?nèi)邊距距離為時，此時這個塊級父元素和其第一個子元素就會發(fā)生上外邊距合并現(xiàn)象。盒模型在CSS中，使用標(biāo)準(zhǔn)盒模型描述這些矩形盒子中的每一個。這個模型描述了元素所占空間的內(nèi)容。每個盒子有四個邊：外邊距邊, 邊框邊, 內(nèi)填充邊與內(nèi)容邊。在標(biāo)準(zhǔn)模式下，一個塊的總寬度=...

frank_fun 2019-08-01 18:29 評論0 收藏0
HTML、CSS筆記

摘要：相鄰的兄弟元素相鄰的兩個兄弟元素之間的外邊距會塌陷。塊級父元素與其第一個最后一個子元素如果塊級父元素中，上邊框?qū)挾燃吧蟽?nèi)邊距距離為時，此時這個塊級父元素和其第一個子元素就會發(fā)生上外邊距合并現(xiàn)象。盒模型在CSS中，使用標(biāo)準(zhǔn)盒模型描述這些矩形盒子中的每一個。這個模型描述了元素所占空間的內(nèi)容。每個盒子有四個邊：外邊距邊, 邊框邊, 內(nèi)填充邊與內(nèi)容邊。在標(biāo)準(zhǔn)模式下，一個塊的總寬度=...

Aomine 2019-08-29 14:22 評論0 收藏0
前端菜鳥筆記 Day-4 CSS布局

摘要：元素框從文檔流完全刪除，并相對于其包含塊定位。簡單來說就是，元素不再占用任何文檔流的空間，只剩下相對于包含塊的定位顯示。行框和清理浮動框旁邊的行框會被縮短，使行框圍繞浮動框，所以創(chuàng)建浮動框可以使文本圍繞圖像。文章大綱來源：【Day 3】HTML復(fù)習(xí) + CSS基礎(chǔ) CSS框模型寬度和高度內(nèi)邊距外邊距 CSS定位浮動 CSS框模型內(nèi)容引用：CSS 框模型概述 CSS 框模...

go4it 2019-08-30 15:55 評論0 收藏0