The column-gap and column-rule properties are used to insert gaps and lines between the column of a multicol element. Note that the length of the column gaps and column rules must be equal to the length of the columns.
Now here we create a Web page named columngaprules.html to use the column-gap and column-rule properties.
<!doctype html>
<body>
<p style="background-color:#4400FF;border-width:1em;border-style:outset;border-color:green;-webkit-column-count:3;-webkit-column-width:200px;-webkit-column-gap:100px;-webkit-column-rule:20px yellow double;">
column-gap and column-rule column-gap and column-rule column-gap and column-rule column-gap and column-rule column-gap and column-rule column-gap and column-rule column-gap and column-rule column-gap and column-rule column-gap and column-rule column-gap and column-rule column-gap and column-rule column-gap and column-rule column-gap and column-rule column-gap and column-rule column-gap and column-rule column-gap and column-rule column-gap and column-rule
</p>
</body>
</html>
Here the content of the P element is displayed in three cloumn of 200px width.
The output of above Webpage:
Now here we create a Web page named columngaprules.html to use the column-gap and column-rule properties.
<!doctype html>
<body>
<p style="background-color:#4400FF;border-width:1em;border-style:outset;border-color:green;-webkit-column-count:3;-webkit-column-width:200px;-webkit-column-gap:100px;-webkit-column-rule:20px yellow double;">
column-gap and column-rule column-gap and column-rule column-gap and column-rule column-gap and column-rule column-gap and column-rule column-gap and column-rule column-gap and column-rule column-gap and column-rule column-gap and column-rule column-gap and column-rule column-gap and column-rule column-gap and column-rule column-gap and column-rule column-gap and column-rule column-gap and column-rule column-gap and column-rule column-gap and column-rule
</p>
</body>
</html>
Here the content of the P element is displayed in three cloumn of 200px width.
The output of above Webpage:
No comments:
Post a Comment