Horizontal Formatting

Developer
Rob Levin
Size
3,439 Kb
Views
6,072
  1. Horizontal Formatting Previews
  2. Horizontal Formatting HTML Codes
  3. Horizontal Formatting CSS Codes

How do I make an horizontal formatting?

Studying various containing block rules as applied to horizontal formatting.References: http://www.w3.org/TR/CSS2/visudet.html#blockwidth. What is a horizontal formatting? How do you make a horizontal formatting? This script and codes were developed by Rob Levin on 13 December 2022, Tuesday.

Horizontal Formatting Previews
IQ Test

Horizontal Formatting - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Horizontal Formatting</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="containing-block">
<h1>Replaced Elements</h1><br> <h6>Original image dimensions are: 240x315 and a width of auto will preserve those dimensions. The spec says &ldquo;If 'height' and 'width' both have computed values of 'auto' and the element also has an intrinsic width, then that intrinsic width is the used value of 'width'. &rdquo;</h6> <img src="https://i.imgur.com/fSCZfbg.png" style="display: block; width: auto: margin: 0;" alt="coder dude" /> <em>I've used inline styles for convenience purposes, but this is a big &ldquo;no-no&rdquo; in production systems!</em><br> <h6>The width can be set and the image dimensions the height will scale to match (unless it's already been set to an explicit value). The same thing happens if you set the height (width will scale accordinly provide it's not already set).</h6> <img src="https://i.imgur.com/fSCZfbg.png" style="display: block; width: 50px; margin: 0;" alt="coder dude" />
<h1>Negative Margins</h1><br> <div class="negative-margins"> <p>Paragraph with container 600px, margin-left 10px, width of auto, and a negative margin-right of -50px; Due to the negative margin right, we have to add the difference back to the width as follows:</p> <ul> <li>10px + 0 + 0 + 640px + 0 + 0 - 50px = 600px</li> <li>The total of the seven horizontal properites always equals the <em>width</em> of the parent element. So width auto evaluated to being wider than the parent due to the negative margin.</li> <li>The inverse can happen where a margin auto gets evaluated to whatever's required to ensure the child's width is same as parent container.</li> </ul> </div>
<h1>Containers and Horizontal Formatting</h1><br> <p>Paragraph with 10px padding. Note that it's width is automatically the containing block's &ldquo;content edge&rdquo;, so the container's 20px padding taken in to consideration here. According to Eric Meyer: "For an element in the normal, Western-style flow of text, the containing block is formed by the <em>content edge</em> of the nearest block-level, table-cell, or inline-block anscestor box.</p> <p>Paragraph with left margin auto, width &amp; right margin to 200px. Since the <em>content edge</em> of the container is 800px, the margin-left will be 400px accordingly.</p> <p>Paragraph where margin left/right &amp; width are all set to 200px–thus, these properties are said to be <em>overcontrained</em>. The <em>content edge</em> of the container is 800px but these values add up to 600px. The difference will be made up on the right margin (since the default writing direction is left-to-right). This rule is flipped when direction is right-to-left.</p> <p>This is a paragraph with 200px left and right margins and width set to auto.</p> <p>This is a paragraph with width set to 200px, but the left and right margins are set to auto.</p>
</div>
</body>
</html>

Horizontal Formatting - Script Codes CSS Codes

* { margin: 0; padding: 0;
}
.containing-block { background-color: #ededed; width: 800px; margin: 20px; padding: 20px;
}
.negative-margins { background-color: silver; width: 600px; padding-bottom: 20px;
}
.negative-margins li { list-style: none; margin-left: 2em;
}
.negative-margins p { margin-left: 10px; width: auto; margin-right: -50px; color: #333; background: rgba(200, 0, 250, 0.2); outline: 0;
}
p { color: #f1f1f1; background-color: #888; margin-bottom: 10px; padding: 10px; outline: 2px solid #555;
}
p:nth-of-type(2) { margin-left: auto; margin-right: 200px; width: 200px;
}
p:nth-of-type(3) { margin-left: 200px; margin-right: 200px; width: 200px;
}
p:nth-of-type(4) { margin-left: 200px; margin-right: 200px; width: auto;
}
p:nth-of-type(5) { margin-left: auto; margin-right: auto; width: 200px;
}
Horizontal Formatting - Script Codes
Horizontal Formatting - Script Codes
Home Page Home
Developer Rob Levin
Username roblevin
Uploaded December 13, 2022
Rating 3
Size 3,439 Kb
Views 6,072
Do you need developer help for Horizontal Formatting?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Rob Levin (roblevin) Script Codes
Name
Centering
A Pen by Rob Levin
Inline SVG Fill and Stroke
Simple Snap.svg Example
Collapsing Margins
Pricing Plan Experiment
Backed by UXR
SVG Frontend Masters Study Notes
Simple Snap.svg Drawing Example
Linear Step Keyframe Animation
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!