So, if you've been a web developer before, you have surely ran into the problem of how tacky it looks for the text to go the total way across the screen. It is also not visually pleasing for text to head butt the top of the window, or for the text to run all the way to the bottom of the viewport.
One way to solve this would be to put in constants to measure out how wide you want your paragraphs to be. The problem with this approach is that it will only work on the device you are developing on. So if you are developing on a laptop, then when you load your page on a phone or tablet things may be off.
We can do this with a combination of two HTML divs, and some CSS. First, wee will need some HTML:
There are only two divs here. The div with the id "mainScroller" is representative of your main scrolling container. In some cased this may be the body element, and in other cases this may be a div. The inner div with the id "mainMargin" is the div doing the heavy lifting for our margins. We will achieve our margins with the following CSS.
The CSS for #mainMargin is very strait forward. It is just to frame our margin element. The CSS for the #mainMargin element goes as follows:
Next time you need to make some article margins, don't be scared! Say, "I've got this: I've learned that already. However, you could save yourself a lot of personal time, and just call Web Apps Actualized
WebDev Suite (in house) - Microsoft Paint - Microsoft Paint 3d - Apache Open Office Draw - Microsoft Windows - Guitar Pro 6 - Stack Overflow - W3Schools - PHP.net - Web Browsers (Mostly Chrome) - Apache XAMPP - Git - Cmake - Brotli Compression - JShrink Minifier Combined with Rodrigo54 Minifier - cwebp