Solution to define the minimum height of span has no effect

The span tag is often used when making HTML web pages, but some friends don’t know how to use this tag well. They think it is easy to use, but troublesome to use, especially when they need to define its width and height.

A friend once asked me: Why after defining the height and width of span with CSS, its width and height still do not change, as if they are invalid?

In fact, this problem is very simple - first you need to understand the properties of span, because span is an inline element, and inline elements ignore width and height. Once you understand this, the solution is very simple. The solution is to use CSS to turn span into a boxed element.

There are two ways to define an inline element as a boxed element:

1. Use the display attribute display directly to define it as a boxed element;

Copy code

The code is as follows:

display:block;

2. Use the float attribute to automatically define it as a boxed element;

Copy code

The code is as follows:

float:left;

Analysis and solution of the reasons why HTML external reference CSS files are not effective

Blog

Solution to define the minimum height of span has no effect

Float and Clear Float in Overview Page

Detailed explanation of eight ways to optimize MySQL database (classic must-read)

Analysis and solution of the reasons why HTML external reference CSS files are not effective

Vue implements a small countdown function

HTML Basics Must-Read - Comprehensive Understanding of CSS Style Sheets

Detailed explanation of JavaScript function this pointing problem

Vue uniapp realizes the segmenter effect

MySQL 5.7.16 installation and configuration method graphic tutorial (Ubuntu 16.04)

Solution for installing opencv 3.2.0 in Ubuntu 18.04

Solution to transparent font problem after turning on ClearType in IE

Recommend

MySQL 8.0.20 installation and configuration tutorial under Docker

Detailed explanation of zabbix executing scripts or instructions on remote hosts

Install Docker on CentOS 7

Solution to the problem that Docker container cannot be stopped or killed

Pure CSS header fixed implementation code

Implementation of importing and exporting vue-element-admin projects

Teach you how to monitor Tomcat's JVM memory through JConsoler

The most complete tutorial on installing centos8.1 with VMware15.5 and the problem of insufficient physical memory

Teach you how to build hive3.1.2 on Tencent Cloud

Solution for FileZilla 425 Unable to connect to FTP (Alibaba Cloud Server)

Steps to install MySQL 8.0.23 under Centos7 (beginner level)

Using docker command does not require sudo

The tdwidth setting of the table in multiple divs is the same and cannot be aligned

Detailed explanation of mixins in Vue.js

CentOS 8 Installation Guide for Zabbix 4.4