對行內元素設定padding和margin不起作用

阿新 • • 發佈：2020-12-30

技術標籤：css html css

前言

看了表嚴肅表哥的電商網站專案，自己動手親自實現了一遍，前前後後遇到了幾個問題，特此總結一下。

1、問題

無論是padding還是margin，都只有left和right起作用，top和bottom不起作用，示例如下：

程式碼：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" 
 href="test.css" type="text/css">
    <style>
      div {
        background-color: black;
        width: 300px;
        height: 50px;
      }
      .b {
        padding: 20px;
      }

    </style>
  </head>
  <body>
    <div></div>
    <span> 
aaaaaaaa</span>
    <span class="b">bbbbbbbb</span>
    <span>ccccccc</span>
    <div></div>
  </body>
</html>

顯示結果：

可見只有padding-left和right在起作用，那麼如何讓padding-top和bottom也起作用呢？

2、解決方案

答：將行內元素變為塊級元素即可（margin同)。如下：
程式碼：

<!DOCTYPE html>
< 
html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="test.css" type="text/css">
    <style>
      div {
        background-color: black;
        width: 300px;
        height: 50px;
      }
      .b {
        display: inline-block;
        padding: 20px;
      }

    </style>
  </head>
  <body>
    <div></div>
    <span>aaaaaaaa</span>
    <span class="b">bbbbbbbb</span>
    <span>ccccccc</span>
    <div></div>
  </body>
</html>

顯示結果：
在這裡插入圖片描述

對行內元素設定padding和margin不起作用

技術標籤：csshtmlcss 前言看了表嚴肅表哥的電商網站專案，自己動手親自實現了一遍，前前後後遇到了幾個問題，特此總結一下。

塊級元素和行內元素不設寬高下設定padding的總結

今天在總結前面學過的CSS時，發現筆記上記了一句“如果盒子沒有設定高和寬，那麼padding不會撐大盒子”，然後就去探究了一下，結果發現好像沒有那麼簡單，結論寫到註釋了，只是淺淺的研究了一下，剛入門CSS，純新手。

行內元素和與行內塊元素的margin-top問題

技術標籤：htmlcss 行內元素和與行內塊元素的margin-top問題內聯(行級)元素不能設定寬高，但padding屬性可以設定，需要注意的是行級元素不能設定margin-top和margin-bottom屬性，但可以設定margin-left和margi

CSS基礎行內元素/行內塊元素設定垂直對齊方式及常見使用案例

vertical-align 屬性值效果 baseline 基線對齊 top 頂部對齊 middle 中心對齊 bottom 底部對齊使用案例1：百度搜索框左邊和右邊底部沒有對齊

設定overflow:hiden行內元素會發生偏移的現象

父級元素包含幾個行內元素 <div id=\"box\"><p><span>按鈕</span><span>測試文字文字文字測試文字文字文字</span><span>看這裡</span></p> </div>

複合選擇器，塊元素，行內元素，CSS背景，CSS層疊性、繼承性和優先順序

這篇筆記主要講了CSS快捷鍵的使用方法，複合選擇器，塊元素，行內元素，CSS背景，CSS層疊性、繼承性和優先順序

常見的塊級元素和內聯(行內)元素

文件流（normal flow）網頁是一個多層的結構，一層摞著一層，通過 CSS 可以分別為每一層設定樣式，作為使用者只能看到最頂上的一層，這些層中，最底下的一層稱為文件流。文件流是網頁的基礎，指的是元素排版佈局

vertical-align 調整行內元素對齊

技術標籤：CSS 在電商專案中，經常會搞活動，標上價格後，後面再跟個活動名稱，例如：

html中的行內元素和塊級元素的總結

技術標籤：htmlhtml 塊級元素和行內元素元素分類特點(區別)塊級元素元素(標籤)執行在頁面時，會自動換行，呈豎排顯示行內元素元素(標籤)執行在頁面時，不自動換行，呈橫排顯示

塊元素和行內元素

列表什麼是列表列表就是資訊資源的一種展示形式。它可以使資訊結構化和條理化，並以列表的樣式顯示出來，以便瀏覽者能更快地獲得相應的資訊列表的分類

關於塊級元素和行內元素的總結（面試常考）

目錄一、前言二、塊級元素 1、塊級元素的定義 2、塊級元素的特點 3、常見的塊級元素

行內元素和塊級元素的區別和轉換

行內元素和塊級元素什麼區別，然後怎麼相互轉換塊級元素 1.總是從新的一行開始，即各個塊級元素獨佔一行，預設垂直向下排列；

(八).元素浮動，行內塊和行內元素在佈局上的特點，頁面佈局的些許事項

1 浮動 1.1 浮動的簡介 1. 浮動最初實現文字環繞效果 2. 現在浮動是主流的頁面佈局方式之一

line-height與vertical-align之行內元素佈局

CSS 垂直對齊vertical-align屬性在CSS中，行框的高度總是足以容納它包含的所有行內級框，當一個行內級框 B 的高度小於包含它的行框高度時，則由vertical-align屬性來決定B在行框中垂直對齊的位置。因此，vertical-a

HTML行內元素、塊狀元素、行內塊狀元素

HTML可以將元素分類方式分為行內元素、塊狀元素和行內塊狀元素三種。首先需要說明的是，這三者是可以互相轉換的，使用display屬效能夠將三者任意轉換：

前端html標籤：塊級元素，行內元素，空元素

前端是一個很容易入門，但卻很難走進去的一個行業。看似簡單，但一旦深入，就“不可自拔”。說到，前端，肯定少不了要認識他的組成元素，那這就涉及到塊級元素，行內元素以及一些空元素。

img標籤到底是行內元素還是塊級元素

面試官問你<img>是什麼元素時你怎麼回答寫這篇文章源自我之前的一次面試，題目便是問img標籤屬於塊級元素還是行內元素，當時想都沒想就說了是行內(inline)元素，面試官追問為什麼能夠設定 <img /> 標籤

如何刪除Image元素下面的空白行及為什麼行內元素有下行線

翻譯練習原部落格地址：Removing White Space Below Image Elements, or Why Inline Elements Have Descenders

2.塊級元素與行內元素的特點

技術標籤：html+csshtmlcsscss3html5 a labelbr進行換行。單獨的br標籤容易被誤以為塊集元素。實際上是行內元素

行內元素與塊級元素

技術標籤：HTMLhtml5 一、行內元素行內元素只佔據其內容本身所佔據的空間二、塊級元素

對行內元素設定padding和margin不起作用

前言

1、問題

2、解決方案

相關推薦