CSS Padding填充

SS Padding（填充）属性定义元素边框与元素内容之间的空间。

Padding（填充）

当元素的 Padding（填充）（内边距）被清除时，所"释放"的区域将会受到元素背景颜色的填充。

单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。

可能的值

值	说明
length	定义一个固定的填充(像素, pt, em,等)
%	使用百分比值定义一个填充

填充- 单边内边距属性

在CSS中，它可以指定不同的侧面不同的填充：

实例

padding-top:25px;

padding-bottom:25px;

padding-right:50px;

padding-left:50px;

填充 - 简写属性

为了缩短代码，它可以在一个属性中指定的所有填充属性。

这就是所谓的缩写属性。所有的填充属性的缩写属性是"padding":

实例

padding:25px 50px;

尝试一下 »

Padding属性，可以有一到四个值。

padding:25px 50px 75px 100px;

上填充为25px
右填充为50px
下填充为75px
左填充为100px

padding:25px 50px 75px;

上填充为25px
左右填充为50px
下填充为75px

padding:25px 50px;

上下填充为25px
左右填充为50px

padding:25px;

所有的填充都是25px

更多实例

在一个声明中的所有填充属性

这个例子演示了使用缩写属性设置在一个声明中的所有填充属性，可以有一到四个值。

设置左部填充

这个例子演示了如何设置元素左填充。

设置右部填充

这个例子演示了如何设置元素右填充。.

设置上部填充

这个例子演示了如何设置元素上填充。

设置下部填充

这个例子演示了如何设置元素下填充。

所有的CSS填充属性

属性	说明
padding	使用缩写属性设置在一个声明中的所有填充属性
padding-bottom	设置元素的底部填充
padding-left	设置元素的左部填充
padding-right	设置元素的右部填充
padding-top	设置元素的顶部填充

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

模型是CSS布局的基础，理解它的每个组成部分对于创建整洁、响应式的网页至关重要。本文将深入探讨盒模型的四个主要组成部分：边距（Margin）、边框（Border）、填充（Padding）和内容（Content），并解释它们如何共同工作来创建网页布局。

盒模型概述

在CSS中，盒模型是一种用于设计和布局的概念模型，它将HTML元素视为一个盒子。这个盒子包括了元素的内容、内边距、边框和外边距。理解盒模型对于控制元素的大小和在页面上的位置至关重要。

盒模型的结构

+-------------------------------+
|           Margin              |
|  +-------------------------+  |
|  |        Border           |  |
|  |  +-------------------+  |  |
|  |  |     Padding       |  |  |
|  |  |  +-------------+  |  |  |
|  |  |  |   Content   |  |  |  |
|  |  |  +-------------+  |  |  |
|  |  +-------------------+  |  |
|  +-------------------------+  |
+-------------------------------+

每个盒子从里到外包括：

内容（Content）：这是盒子中的实际内容，包括文本、图片或其他媒体。
内边距（Padding）：内容区域周围的空间，内边距是透明的。
边框（Border）：围绕内边距和内容的线框，可以设置大小、样式和颜色。
外边距（Margin）：盒子外围的空间，用来隔开相邻的盒子。

边距（Margin）

边距是盒子外部的空间，它决定了元素之间的间隔。边距是透明的，不可见，不会被背景颜色或背景图片覆盖。

/* 单边边距设置 */
.element {
  margin-top: 10px;    /* 上边距 */
  margin-right: 15px;  /* 右边距 */
  margin-bottom: 10px; /* 下边距 */
  margin-left: 15px;   /* 左边距 */
}

/* 简写形式 */
.element {
  margin: 10px 15px;   /* 上下边距 | 左右边距 */
}

边距可以用来创建元素之间的空间，或者将元素与页面边缘分开。当两个元素的垂直边距相遇时，它们会合并成一个边距，这个现象称为边距折叠。

边框（Border）

边框是盒子的一个可视化组件，围绕着内边距和内容。边框的样式、宽度和颜色都可以自定义。

.element {
  border-style: solid; /* 边框样式 */
  border-width: 2px;  /* 边框宽度 */
  border-color: black; /* 边框颜色 */
}

/* 简写形式 */
.element {
  border: 2px solid black;
}

边框对于突出显示元素或分隔内容非常有用。你还可以只为边框的一边或几边设置样式。

填充（Padding）

填充是围绕内容内部的空间，它可以增加内容和边框之间的距离。与边距不同，填充区域会被背景颜色或背景图片覆盖。

.element {
  padding-top: 5px;    /* 上填充 */
  padding-right: 10px;  /* 右填充 */
  padding-bottom: 5px; /* 下填充 */
  padding-left: 10px;   /* 左填充 */
}

/* 简写形式 */
.element {
  padding: 5px 10px;   /* 上下填充 | 左右填充 */
}

填充对于控制元素内部的空白区域非常有用，它可以帮助改善内容的可读性。

内容（Content）

内容是盒子中的文字、图片或其他媒体。内容的大小可以通过设置width和height属性来控制，但实际可见区域的大小还会受到内边距和边框的影响。

.element {
  width: 200px;
  height: 150px;
}

内容区域是设计和布局的核心，所有的文本和媒体都在这里显示。

示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Margin, Border, Padding Example</title>
<style>
  body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
  }

  .container {
    max-width: 800px;
    margin: auto;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .header {
    background-color: #007bff;
    color: white;
    padding: 20px;
    text-align: center;
  }

  .content {
    padding: 20px;
    border: 1px solid #ddd;
    margin: 20px;
  }

  .box {
    background-color: #007bff;
    color: white;
    padding: 10px;
    margin: 10px;
    border: 3px solid #0056b3;
    text-align: center;
  }

  .footer {
    background-color: #333;
    color: white;
    padding: 10px;
    text-align: center;
  }
</style>
</head>
<body>

<div class="container">
  <div class="header">
    <h1>Welcome to My Page</h1>
  </div>

  <div class="content">
    <h2>Understanding CSS Box Model</h2>
    <p>The CSS box model is essentially a box that wraps around every HTML element. It consists of margins, borders, padding, and the actual content. This model allows us to create space between elements and style them effectively.</p>
    
    <div class="box">Content Box</div>
  </div>

  <div class="footer">
    Footer Content
  </div>
</div>

</body>
</html>

总结

理解盒模型是前端开发的基础，它允许我们精确控制元素的布局和间距。通过恰当地使用边距、边框、填充和内容，我们可以创建出既美观又功能强大的网页设计。随着响应式设计的兴起，现代CSS框架已经将盒模型的概念整合进其核心，使得跨设备布局变得更加一致和简单。

在日常开发中，经常使用开发者工具来检查和调试盒模型的各个部分，确保我们的样式表现按照预期工作。掌握盒模型，你将能够更加自信地处理网页布局的挑战。

题背景描述

我们在做项目的时候，可能会遇到这样的一个需求，根据业务数据，生成一份pdf文件，然后提供给用户下载查看。

生成pdf文件，可能会有很多种方式实现：

1.根据html模板，把数据填充到html模板，生成一份pdf文件
2.根据pdf模板，把数据填充到pdf模板，生成一份pdf文件
3.根据word模板，把数据填充到word模板，生成一份pdf文件

对比了这3种实现方式：

第1种实现方式，html的代码，会导致有些样式丢失，效果不好。(不太建议)
第2种实现方式，操作起来，很麻烦，需要编写大量的代码，最终的效果也不是很友好。(难度比较大，不太建议)
第3种实现方式，这种实现，是个人目前觉得比较好的一种方式，样式，实现也可以接受啦！！！

以上，仅代表个人观点，可能有不对的地方，别喷，或轻点喷！！！

那今天咋们着重的讨论一下第3种实现方式！！！^_^

word转pdf说明

目前，word转pdf，我们可以借助openoffice帮我们实现这个功能。

但凡，有个但是啦，毕竟你要借助openoffice，这毕竟是一个工具，那咋们就不得不部署运行这个程序，那这样得话，不得加重咋们后期服务器的部署和运维了嘛？

所以这里，咋们还是得想想看，有无其他简单的实现方式？

哈哈，那肯定是有的啦，我们可以通过纯代码的方式，实现word转pdf的功能！！！

下面看哥们操作喽！！！^_^

word转pdf实现

word模板数据填充工具类

public class WordTemplateUtils {
    private static Logger logger = LoggerFactory.getLogger(WordTemplateUtils.class);
    /*
     * 根据Word模板生成word文档
     * @param uploadPath    文件夹路径
     * @param writePath     生成word文件路径
     * @param templatePath  word模板路径
     * @param contentMap    填充数据
     */
    public static boolean writeWordByTemplate(String uploadPath, String writePath, String templatePath, Map<String, Object> contentMap) throws Exception {
        //如果文件夹不存在，新建文件夹
        File file = new File(uploadPath);
        //如果路径不存在，新建
        if (!file.exists() && !file.isDirectory()) {
            file.mkdirs();
        }
        boolean result = false;
        logger.info("---根据模板生成word文档");
        XWPFDocument document = new XWPFDocument(new FileInputStream(templatePath));
        if (document == null) {
            logger.error("---模板文件不存在，tempPath：{}", templatePath);
            return result;
        }
        InputStream is = null;
        FileOutputStream fos = null;
        try {
            fos = new FileOutputStream(writePath);
            WordTemplateUtils.changeText(document, contentMap);
            //生成新的word文档
            document.write(fos);
            result = true;
        } catch (IOException e) {
            logger.error("---输出word文档失败,原因：{}", e.getMessage());
            result = false;
        } finally {
            if (is != null) {
                is.close();
            }
            if (fos != null) {
                fos.close();
            }
        }
        return result;
    }

    /**
     * 替换段落文本
     *
     * @param document docx解析对象
     * @param textMap  需要替换的信息集合
     */
    private static void changeText(XWPFDocument document, Map<String, Object> textMap) {
        //获取段落集合
        List<XWPFParagraph> paragraphs = document.getParagraphs();
        for (XWPFParagraph paragraph : paragraphs) {
            //判断此段落时候需要进行替换
            String text = paragraph.getText();
            System.out.println(text);
            if (!text.equals("")) {
                List<XWPFRun> runs = paragraph.getRuns();
                for (XWPFRun run : runs) {
                    String textR = run.getText(0);//读取的模板段落
                    if (StringUtils.isEmpty(textR)) {
                        continue;
                    }
                    String newTxetR = "";
                    //判断文本是否需要进行替换
                    // System.out.print(textR + ",");
                    for (Map.Entry<String, Object> entry : textMap.entrySet()) {
                        //匹配模板与替换值 格式${key}
                        String key = entry.getKey();
                        Object value = entry.getValue();

                        if (textR.contains(key)) {//
                            if (value instanceof String) { //文字替换
                                String inputText = value.toString();
                                if (inputText.contains("\n")) {//包含换行符
                                    String[] lines = inputText.split("\n");
                                    //newTxetR = textR.replace(key, lines[0]);
                                    run.setText(lines[0].trim(), 0); // set first line into XWPFRun
                                    for (int i = 1; i < lines.length; i++) {
                                        // add break and insert new text
                                        run.addBreak();//换行
                                        run.addTab();//缩进
                                        run.setText(lines[i].trim());
                                    }
                                } else {
                                    newTxetR = textR.replace(key, (String) value);
                                    //替换模板原来位置
                                    if (!newTxetR.equals("")) {
                                        run.setText(newTxetR, 0);
                                    }
                                }
                            } else if (value instanceof Map) { //图片替换
                                newTxetR = textR.replace(key, "");
                                //替换模板原来位置
                                if (!newTxetR.equals("")) {
                                    run.setText(newTxetR, 0);
                                }
                                Map picMap = (Map) value;
                                int width = Integer.parseInt(picMap.get("width").toString());
                                int height = Integer.parseInt(picMap.get("height").toString());
                                int picType = getPictureType(picMap.get("type").toString());
                                FileInputStream fis = (FileInputStream) picMap.get("content");
                                try {
                                    String blipId = document.addPictureData(fis, picType);
                                    int id = document.getNextPicNameNumber(picType);
                                    createPicture(id, blipId, width, height, run);
                                } catch (Exception e) {
                                    e.printStackTrace();
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    /**
     * @param id
     * @param blipId
     * @param width  宽
     * @param height 高
     *               //* @param paragraph  段落
     */
    private static void createPicture(int id, String blipId, int width, int height, XWPFRun xwpfRun) {
        final int EMU = 9525;
        width *= EMU;
        height *= EMU;
        CTInline inline = xwpfRun.getCTR().addNewDrawing().addNewInline();
        //CTInline inline = paragraph.createRun().getCTR().addNewDrawing().addNewInline(); //在遍历run列表的时候，创建新的run有可能会导致报错
        String picXml = ""
                + "<a:graphic xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main">"
                + "   <a:graphicData uri="http://schemas.openxmlformats.org/drawingml/2006/picture">"
                + "      <pic:pic xmlns:pic="http://schemas.openxmlformats.org/drawingml/2006/picture">"
                + "         <pic:nvPicPr>" + "            <pic:cNvPr id=""
                + id
                + "" name="Generated"/>"
                + "            <pic:cNvPicPr/>"
                + "         </pic:nvPicPr>"
                + "         <pic:blipFill>"
                + "            <a:blip r:embed=""
                + blipId
                + "" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"/>"
                + "            <a:stretch>"
                + "               <a:fillRect/>"
                + "            </a:stretch>"
                + "         </pic:blipFill>"
                + "         <pic:spPr>"
                + "            <a:xfrm>"
                + "               <a:off x="0" y="0"/>"
                + "               <a:ext cx=""
                + width
                + "" cy=""
                + height
                + ""/>"
                + "            </a:xfrm>"
                + "            <a:prstGeom prst="rect">"
                + "               <a:avLst/>"
                + "            </a:prstGeom>"
                + "         </pic:spPr>"
                + "      </pic:pic>"
                + "   </a:graphicData>" + "</a:graphic>";

        inline.addNewGraphic().addNewGraphicData();
        XmlToken xmlToken = null;
        try {
            xmlToken = XmlToken.Factory.parse(picXml);
        } catch (XmlException xe) {
            xe.printStackTrace();
        }
        inline.set(xmlToken);

        inline.setDistT(0);
        inline.setDistB(0);
        inline.setDistL(0);
        inline.setDistR(0);

        CTPositiveSize2D extent = inline.addNewExtent();
        extent.setCx(width);
        extent.setCy(height);

        CTNonVisualDrawingProps docPr = inline.addNewDocPr();
        docPr.setId(id);
        docPr.setName("docx_img_ " + id);
        docPr.setDescr("docx Picture");
    }

    /**
     * 根据图片类型，取得对应的图片类型代码
     *
     * @param picType
     * @return int
     */
    private static int getPictureType(String picType) {
        int res = XWPFDocument.PICTURE_TYPE_PICT;
        if (picType != null) {
            if (picType.equalsIgnoreCase("png")) {
                res = XWPFDocument.PICTURE_TYPE_PNG;
            } else if (picType.equalsIgnoreCase("dib")) {
                res = XWPFDocument.PICTURE_TYPE_DIB;
            } else if (picType.equalsIgnoreCase("emf")) {
                res = XWPFDocument.PICTURE_TYPE_EMF;
            } else if (picType.equalsIgnoreCase("jpg") || picType.equalsIgnoreCase("jpeg")) {
                res = XWPFDocument.PICTURE_TYPE_JPEG;
            } else if (picType.equalsIgnoreCase("wmf")) {
                res = XWPFDocument.PICTURE_TYPE_WMF;
            }
        }
        return res;
    }


    public static void main(String[] args) throws Exception {
        Map<String, Object> contentMap = new HashMap<String, Object>();

        //组装文本参数
        contentMap.put("demo1", "示例1");
        contentMap.put("demo2", "示例2");
       
        String fileName = "demo.docx";
        WordTemplateUtils.writeWordByTemplate("D:\word\file", ""D:\word\file\" + fileName, 
            "D:\word\template\template.docx", contentMap);
    }
}
复制代码

word模板，可以是这样：

最终生成的效果如下：

word转pdf工具类

/**
 * Word或Excel 转Pdf 工具类
 *
 * 备注:需要引入 aspose-words-15.8.0-jdk16.jar / aspose-cells-8.5.2.jar
 */
public class PdfUtil {

    private static boolean getLicense() {
        boolean result = false;
        try {
            // license.xml应放在..\WebRoot\WEB-INF\classes路径下
            InputStream is = PdfUtil.class.getClassLoader().getResourceAsStream("License.xml");
            License aposeLic = new License();
            aposeLic.setLicense(is);
            result = true;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return result;
    }

    /**
     * @param wordPath 需要被转换的word文件名
     * @param pdfPath  转换之后pdf的文件
     */
    public static void doc2pdf(String wordPath, String pdfPath) {
        if (!getLicense()) { // 验证License 若不验证则转化出的pdf文档会有水印产生
            return;
        }
        try {
            long old = System.currentTimeMillis();
            File file = new File(pdfPath); //新建一个pdf文档
            FileOutputStream os = new FileOutputStream(file);
            Document doc = new Document(wordPath); //Address是将要被转化的word文档
            doc.save(os, com.aspose.words.SaveFormat.PDF);//全面支持DOC, DOCX, OOXML, RTF HTML, OpenDocument, PDF, EPUB, XPS, SWF 相互转换
            long now = System.currentTimeMillis();
            os.close();
            System.out.println("共耗时：" + ((now - old) / 1000.0) + "秒"); //转化用时
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * @param excelPath 需要被转换的excel全路径带文件名
     * @param pdfPath   转换之后pdf的全路径带文件名
     */
    public static void excel2pdf(String excelPath, String pdfPath) {
        if (!getLicense()) { // 验证License 若不验证则转化出的pdf文档会有水印产生
            return;
        }
        try {
            long old = System.currentTimeMillis();
            Workbook wb = new Workbook(excelPath);// 原始excel路径
            FileOutputStream fileOS = new FileOutputStream(new File(pdfPath));
            wb.save(fileOS, com.aspose.cells.SaveFormat.PDF);
            fileOS.close();
            long now = System.currentTimeMillis();
            System.out.println("共耗时：" + ((now - old) / 1000.0) + "秒"); //转化用时
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

   

    public static void main(String[] args) {
        //word 和excel 转为pdf
        String fileName = "D:\word\file\demo.docx";
        String pdfPath = "D:\word\pdf\demo..pdf";
        doc2pdf(filePaths, pdfPath);
    }
}
复制代码

这里提供一下：License.xml文件

<License>
    <Data>
        <Products>
            <Product>Aspose.Total for Java</Product>
            <Product>Aspose.Words for Java</Product>
        </Products>
        <EditionType>Enterprise</EditionType>
        <SubscriptionExpiry>20991231</SubscriptionExpiry>
        <LicenseExpiry>20991231</LicenseExpiry>
        <SerialNumber>8bfe198c-7f0c-4ef8-8ff0-acc3237bf0d7</SerialNumber>
    </Data>
    <Signature>sNLLKGMUdF0r8O1kKilWAGdgfs2BvJb/2Xp8p5iuDVfZXmhppo+d0Ran1P9TKdjV4ABwAgKXxJ3jcQTqE/2IRfqwnPf8itN8aFZlV3TJPYeD3yWE7IT55Gz6EijUpC7aKeoohTb4w2fpox58wWoF3SNp6sK6jDfiAUGEHYJ9pjU=</Signature>
</License>

好了，这个就是word转pdf的示例，也是比较简单啦！！！

好了，word转pdf，大概的实现，就是这样了！！！^_^

那我们就可以愉快的编写代码了！！！^_^

作者：llsydn
链接：https://juejin.cn/post/7087036463035973640

在线咨询

上一篇：js 跳转页面方式详解
下一篇："巧用CSS ::before 创建带透明阴影效果的图标按

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商