HTML+CSS Easy to Get Started with Inline Block Elements

Inline-block elements have the characteristics of both inline elements and block elements

So how to set elements as inline block elements

display:inline-block;

Note: (new in css2.1), <img>, <input> tags are such inline block tags.

Characteristics of inline block elements

1, and other elements are on the same line;

2 , the element's height, width, line height, and top and bottom margins can all be set.

Let’s write an example below to set the width, height, background color, etc. for an a tag. The a tag is an inline element by default, and the width and height have no effect.

The code is as follows:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
	a{
		display:inline-block;	/*内联块状元素*/	
		width:300px;
		height:200px;
		background-color:green;
		color:red;
	}
</style>
</head>
<body>
  	<a href="#">欢迎大家来到php中文网</a>
</body>
</html>

As shown in the above code, when we convert the a tag into an inline block element, we can set the width and height

Continuing Learning

new file

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> a{ display:inline-block; /*内联块状元素*/ width:300px; height:200px; background-color:green; color:red; } </style> </head> <body> <a href="#">欢迎大家来到php中文网</a> </body> </html>

submit Reset Code

Automatic operation

HTML+CSS Easy to Get Started with Inline Block Elements

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]