Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Home > Web Front-end > H5 Tutorial > body text

How to use the HTML5 box model

PHP中文网

Release： 2017-06-20 10:46:27

Original

7971 people have browsed it

Box model.

The box consists of four parts: margin, border, padding, and content.

margin: Margin

##border ：Border

padding：Padding (distance between content and border)

content：content

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">* {margin: 0;padding: 0;}div {/*设置背景颜色*/background-color: blue;/*设置宽高*/width: 250px;height: 250px;/*设置外边距*/margin: 130px;/*设置边框的:边框的宽度 边框的样式 边框的颜色*/border: 10px solid red;/*设置内边距:上,右,下,左*/padding: 20px 40px 50px 100px;}</style></head><body><div>ABCDEFG</div></body></html>

Copy after login

The above is the detailed content of How to use the HTML5 box model. For more information, please follow other related articles on the PHP Chinese website!

Related labels：

h5 html5 Model

source：php.cn

Previous article：Use JSSDK to obtain geographical location from web pages Next article：How to use HTML5-Web storage?

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn